<!--
 * @Author: wangwang 2723008256@qq.com
 * @Date: 2022-05-31 17:02:24
 * @LastEditors: 番茄炒蛋蛋 wzh15802755802@163.com
 * @LastEditTime: 2024-12-05 14:58:41
 * @FilePath: \jzjypc4.0\src\views\ActiveCenter\fullScreen.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="container">
    <div class="top">
      <div class="bread" v-if="from != 'index'">
        <span>当前位置：</span>
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: '/active' }"
            >活动中心</el-breadcrumb-item
          >
          <el-breadcrumb-item
            :to="{
              path:
                '/active/seeMoreActive?type=' +
                acType +
                '&activityfl_id=' +
                activityfl_id +
                '&typeTitle=' +
                fltitle,
            }"
            v-if="activityfl_id != 0"
            >{{ fltitle }}</el-breadcrumb-item
          >
          <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="bread" v-if="from == 'index'">
        <span>当前位置：</span>
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <div class="activeTop" v-if="ggVideoShow">
      <div
        class="videoBox"
        @mouseenter="
          ztBtZzShow == false ? (sbEnterShow = true) : (sbEnterShow = false)
        "
        @mouseleave="sbEnterShow = false"
      >
        <LivePlayer
          ref="livePlayer"
          :videoUrl="gg_video_file_url"
          :poster="gg_file_url"
          :autoplay="false"
          :muted="false"
          :show-custom-button="true"
          :loading="true"
          v-if="false"
        >
        </LivePlayer>
        <div class="videoBox lhUser" v-if="!gg_video_file_url">
          <div class="zhezhao" style="width: 100%; height: 100%">
            <div class="block" style="width: 100%; height: 100%"></div>
            <!-- <img src="../../assets/img/play.png" /> -->
          </div>
          <img :src="gg_file_url" alt="" style="width: 100%" />
          <div class="videoBg">
            <img src="../../assets/img/videoBg.png" alt="" />
            <p v-if="bm_status == 0">
              <i class="el-icon-video-camera"></i>
              预约活动后，才可以观看直播！
            </p>
            <p v-if="bm_status == 1" style="top: 24%; left: 7%">
              距开播仅剩：
              {{ parseInt((start_time_true * 1000 - timeNow) / 3600000 / 24) }}
              <span>天</span>
              {{
                parseInt(((start_time_true * 1000 - timeNow) / 3600000) % 24)
              }}
              <span>小时</span>
              {{
                parseInt(((start_time_true * 1000 - timeNow) / 1000 / 60) % 60)
              }}
              <span>分钟</span>
              {{ parseInt(((start_time_true * 1000 - timeNow) / 1000) % 60) }}
              <span>秒</span>
            </p>
          </div>
        </div>
        <div class="btZz" v-if="sbEnterShow">
          <div class="zzTop">
            <h3>{{ title }}</h3>
          </div>
        </div>
        <div class="zhezhao" v-if="ztBtZzShow && gg_video_file_url">
          <div class="zzTop">
            <h3>{{ title }}</h3>
          </div>
        </div>
        <div class="zhezhao" v-if="false">
          <div class="zzTop">
            <h3>{{ title }}</h3>
          </div>
          <div class="zzBottom">
            <span>重新播放</span>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="daojishi">
          <h5>距开播仅剩</h5>
          <p>
            {{ parseInt((start_time_true * 1000 - timeNow) / 3600000 / 24) }}
            <span>天</span>
            {{ parseInt(((start_time_true * 1000 - timeNow) / 3600000) % 24) }}
            <span>小时</span>
            {{
              parseInt(((start_time_true * 1000 - timeNow) / 1000 / 60) % 60)
            }}
            <span>分钟</span>
            {{ parseInt(((start_time_true * 1000 - timeNow) / 1000) % 60) }}
            <span>秒</span>
          </p>
          <div class="anniu">
            <span id="yyanniu" @click="baoming" v-if="bm_status == 0"
              >预约</span
            >
            <span id="yyanniu" v-if="bm_status == 1">已预约</span>
          </div>
        </div>
        <div class="teacherMsg">
          <h5>主讲名师</h5>
          <div class="tec">
            <div class="pic"><img :src="teachers_file_url" alt="" /></div>
            <div class="msg">
              <h4>{{ teachers_title }}</h4>
              <p>{{ teachers_zhicheng }}</p>
            </div>
          </div>
          <div class="jieshao">
            <p>{{ teachers_sub_title }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="ptAc" v-if="ptAcShow">
      <div class="Box">
        <div class="left">
          <div class="videoBox" ref="player1" @contextmenu.prevent="menuPlayer()"
            v-if="zb_file_url !='' && new Date().getTime() <= this.end_time*1000 && bm_status == 1"
            @mouseenter="ztBtZzShow == false ? (sbEnterShow = true) : (sbEnterShow = false)"
            @mouseleave="sbEnterShow = false"
          >
            <LivePlayer
              ref="livePlayer"
              :videoUrl="zb_file_url"
              fluent
              :muted="false"
              live
              stretch
              :show-custom-button="false"
              :hide-snapshot-button="true"
              v-if="zb_file_url != ''"
            >
            </LivePlayer>
            <div class="personalNum" v-if="zb_status == 2 && is_gly == 1">
              <p><i class="el-icon-user"></i> {{ online_nums }}</p>
            </div>
            <div class="btZz" v-if="sbEnterShow">
              <div class="zzTop">
                <h3>{{ title }}</h3>
              </div>
            </div>
            <div class="zhezhao" v-if="ztBtZzShow">
              <div class="zzTop">
                <h3>{{ title }}</h3>
              </div>
            </div>
          </div>
          <div class="videoBox" ref="player1" @contextmenu.prevent="menuPlayer()"
            v-if="video_file_url != '' && video_file_url != '*' && bm_status == 1 && new Date().getTime() >= this.end_time*1000"
            @mouseenter="ztBtZzShow == false ? (sbEnterShow = true) : (sbEnterShow = false)"
            @mouseleave="sbEnterShow = false"
          >
            <LivePlayer
              ref="livePlayer"
              :videoUrl="video_file_url"
              :muted="false"
              :poster="file_url"
              :show-custom-button="true"
              :loading="true"
              v-if="video_file_url != '' && video_file_url != '*'"
            >
            </LivePlayer>
            <div class="personalNum" v-if="zb_status == 2 && is_gly == 1">
              <p><i class="el-icon-user"></i> {{ online_nums }}</p>
            </div>
            <div class="btZz" v-if="sbEnterShow">
              <div class="zzTop">
                <h3>{{ title }}</h3>
              </div>
            </div>
            <div class="zhezhao" v-if="ztBtZzShow">
              <div class="zzTop">
                <h3>{{ title }}</h3>
              </div>
            </div>
          </div>
          <div class="videoBox" ref="player1" @contextmenu.prevent="menuPlayer()"
            v-if="video_file_url != '' && video_file_url != '*' &&  bm_status == 0 && wbmhfck == 1 && new Date().getTime() >= this.end_time*1000"
            @mouseenter="ztBtZzShow == false ? (sbEnterShow = true) : (sbEnterShow = false)"
            @mouseleave="sbEnterShow = false"
          >
            <LivePlayer
              ref="livePlayer"
              :videoUrl="video_file_url"
              :muted="false"
              :poster="file_url"
              :show-custom-button="true"
              :loading="true"
              v-if="video_file_url != '' && video_file_url != '*'"
            >
            </LivePlayer>
            <div class="personalNum" v-if="zb_status == 2 && is_gly == 1">
              <p><i class="el-icon-user"></i> {{ online_nums }}</p>
            </div>
            <div class="btZz" v-if="sbEnterShow">
              <div class="zzTop">
                <h3>{{ title }}</h3>
              </div>
            </div>
            <div class="zhezhao" v-if="ztBtZzShow">
              <div class="zzTop">
                <h3>{{ title }}</h3>
              </div>
            </div>
          </div>
          <div class="videoBox lhUser" v-if="isLh && bm_status == 1">
            <p style="position: absolute; top: 50%; left: 35%">
              <i class="el-icon-video-camera"></i> 您已被拉黑，无法继续观看直播
            </p>
          </div>
          <div class="videoBox lhUser" v-if="zb_status == 1 && bm_status == 1">
            <div class="zhezhao">
              <div class="block"></div>
              <img src="../../assets/img/play.png" />
            </div>
            <img :src="file_url" alt="" style="width: 100%" />
            <div class="videoBg">
              <img src="../../assets/img/videoBg.png" alt="" />
              <p>
                <i class="el-icon-video-camera"></i> 已预约，敬请期待直播开始！
              </p>
            </div>
          </div>
          <div class="videoBox lhUser" v-if="new Date().getTime() <= this.end_time*1000 &&  bm_status == 0">
            <div class="zhezhao">
              <div class="block"></div>
              <img src="../../assets/img/play.png" />
            </div>
            <img :src="file_url" alt="" style="width: 100%" />
            <div class="videoBg">
              <img src="../../assets/img/videoBg.png" alt="" />
              <p>
                <i class="el-icon-video-camera"></i>
                预约活动后，才可以观看直播！
              </p>
            </div>
          </div>
          <div class="videoBox lhUser" v-if="new Date().getTime() >= this.end_time*1000 && bm_status == 0 && wbmhfck == 0">
            <div class="zhezhao">
              <div class="block"></div>
              <img src="../../assets/img/play.png" />
            </div>
            <img :src="file_url" alt="" style="width: 100%" />
            <div class="videoBg">
              <img src="../../assets/img/videoBg.png" alt="" />
              <p>
                <i class="el-icon-video-camera"></i>
                预约活动后，才可以观看视频！
              </p>
            </div>
          </div>
          <div  class="videoBox lhUser"
            v-if="zb_status == 2 && zb_file_url == '' && bm_status == 1"
          >
            <div class="zhezhao">
              <div class="block"></div>
              <img src="../../assets/img/play.png" />
              <div class="personalNum" v-if="zb_status == 2 && is_gly == 1">
                <p><i class="el-icon-user"></i> {{ online_nums }}</p>
              </div>
            </div>
            <img :src="file_url" alt="" style="width: 100%" />
            <div class="videoBg">
              <img src="../../assets/img/videoBg.png" alt="" />
              <p>
                <i class="el-icon-video-camera"></i>
                直播即将开始，请您耐心等待！
              </p>
            </div>
          </div>
          <div
            class="videoBox lhUser"
            v-if="new Date().getTime() >= this.end_time*1000 && video_file_url == '' && bm_status == 1"
          >
            <div class="zhezhao">
              <div class="block"></div>
              <img src="../../assets/img/play.png" />
            </div>
            <img :src="file_url" alt="" style="width: 100%" />
            <div class="videoBg">
              <img src="../../assets/img/videoBg.png" alt="" />
              <p>
                <i class="el-icon-video-camera"></i
                >回放生成中，请您耐心等待！
              </p>
            </div>
          </div>
          <div
            class="videoBox lhUser"
            v-if=" new Date().getTime() >= this.end_time*1000 && video_file_url == '' && bm_status == 0 && wbmhfck == 1"
          >
            <div class="zhezhao">
              <div class="block"></div>
              <img src="../../assets/img/play.png" />
            </div>
            <img :src="file_url" alt="" style="width: 100%" />
            <div class="videoBg">
              <img src="../../assets/img/videoBg.png" alt="" />
              <p>
                <i class="el-icon-video-camera"></i
                >回放生成中，请您耐心等待！
              </p>
            </div>
          </div>
          <div
            class="videoBox lhUser"
            v-if="zb_status == 3 && video_file_url == '*' && bm_status == 1"
          >
            <div class="zhezhao">
              <div class="block"></div>
              <img src="../../assets/img/play.png" />
            </div>
            <img :src="file_url" alt="" style="width: 100%" />
            <div class="videoBg">
              <img src="../../assets/img/videoBg.png" alt="" />
              <p>
                <i class="el-icon-video-camera"></i
                >回放已结束，敬请关注下期活动！
              </p>
            </div>
            <!-- <div class="shikan" v-if="zb_status != 1">
              <div class="text">
                <h3>订阅服务后可查看全部</h3>
              </div>
              <div class="godingyue" @click="goDingyue">去订阅</div>
            </div> -->
          </div>
          <div
            class="videoBox lhUser"
            v-if="zb_status == 3 && video_file_url == '*' && bm_status == 0 && wbmhfck == 1"
          >
            <div class="zhezhao">
              <div class="block"></div>
              <img src="../../assets/img/play.png" />
            </div>
            <img :src="file_url" alt="" style="width: 100%" />
            <div class="videoBg">
              <img src="../../assets/img/videoBg.png" alt="" />
              <p>
                <i class="el-icon-video-camera"></i
                >回放已结束，敬请关注下期活动！
              </p>
            </div>
            <!-- <div class="shikan" v-if="zb_status != 1">
              <div class="text">
                <h3>订阅服务后可查看全部</h3>
              </div>
              <div class="godingyue" @click="goDingyue">去订阅</div>
            </div> -->
          </div>
          <div
            class="shikan"
            v-if="
              zb_status != 1 &&
              !(bm_status == 0 &&!(zb_status == 3 &&(video_file_url == '' || video_file_url == '*') && zb_file_url == ''))
            "
          >
            <div class="text">
              <h3>教学服务包全新上线</h3>
            </div>
            <div class="godingyue" @click="goDingyue">去预约</div>
          </div>
          <div
            class="shikan"
            v-if="
              bm_status == 0 &&
              !(
                zb_status == 3 &&
                (video_file_url == '' || video_file_url == '*') &&
                zb_file_url == ''
              )
            "
          >
            <div class="text">
              <h3>可预约后查看课程</h3>
            </div>
            <div class="godingyue" @click="baoming">预约</div>
          </div>
          <div class="tcgg" v-if="tcggShow">
            <div class="tcleft">
              <img :src="ggPic" alt="" />
            </div>
            <div class="tcright">
              <h5>{{ ggTitle }}</h5>
              <span @click="goDingyue">立即预约</span>
            </div>
            <div class="closegg" @click="closegg">×</div>
          </div>
        </div>
        <div class="right">
          <div class="taps">
            <div
              class="tap"
              :class="{ choseTap: rightFlag == 1 }"
              @click="choseChat"
              v-if="(zb_status != 3 && type_id != 2) || hklt_status == 1"
            >
              <h3>互动答疑</h3>
              <span></span>
            </div>
            <div
              class="tap"
              :class="{ choseTap: rightFlag == 3 && type_id == 2 }"
              @click="rightFlag = 3"
              v-if="type_id == 2"
            >
              <h3>活动目录</h3>
              <span></span>
            </div>
            <!-- <div
              class="tap"
              :class="{ choseTap: rightFlag == 2 }"
              @click="choseProduct"
            >
              :class="{ choseTap: rightFlag == 2 && zb_status != 3 }"
              <h3>参考图书</h3>
              <span></span>
            </div> -->
            <div
              class="tap"
              :class="{ choseTap: rightFlag == 4  && (zb_status != 3 || hklt_status == 1)}"
              @click="choseFwb"
            >
              <h3>教学服务包</h3>
              <span></span>
            </div>
          </div>
          <div class="tab1" v-show="rightFlag == 1">
            <div class="notice" v-if="msgsh_status == 1">
              <div class="noticeMsg">
                <p>当前直播间已开启评论审核，审核通过的评论会参与互动！</p>
              </div>
              <i class="el-icon-close" @click="closeNotice"></i>
            </div>
            <div class="xxLists">
              <div
                class="getmoremessage"
                @click="getmoreMessage"
                v-show="historyShow"
              >
                <i class="el-icon-loading"></i>
                点击查看历史消息
              </div>
              <div class="getmoremessage" v-show="!historyShow">
                <i class="el-icon-check"></i>
                暂无历史消息
              </div>
              <div
                class="xiaoxiLists"
                v-for="(item, index) in info"
                :key="index"
                v-show="
                  item.type != 'online' &&
                  item.type != 'shmsg' &&
                  item.type != 'delmsg'
                "
              >
                <!-- 左边接受到别人的消息 -->
                <div
                  class="leftXx"
                  v-show="
                    item.type != 'jy' &&
                    item.type != 'lh' &&
                    item.type != 'jyall'
                  "
                >
                  <div class="userInfo" v-if="JSON.parse(item.msg_json).type != 'yuyue'">
                    <img :src="item.file_url" v-if="item.file_url" />
                    <img
                      src="../../assets/img/mrtx.png"
                      v-if="!item.file_url"
                    />
                    <h3 v-show="JSON.parse(item.msg_json).is_gly == 1">
                      管理员
                    </h3>
                    <h4>{{ item.title }}</h4>

                    <p v-if="item.type == 'init'">进入直播间</p>
                  </div>
                  <div class="userInfo" v-if="JSON.parse(item.msg_json).type == 'yuyue' && item.from_id == userId">
                    <img :src="item.file_url" v-if="item.file_url" />
                    <img
                      src="../../assets/img/mrtx.png"
                      v-if="!item.file_url"
                    />
                    <h4>{{ item.title }}</h4>
                  </div>
                  <div class="msgInfo" v-if="item.type == 'sendMessage'">
                    <el-image
                      :src="JSON.parse(item.msg_json).picUrl"
                      v-show="JSON.parse(item.msg_json).picUrl"
                      :preview-src-list="
                        Array(JSON.parse(item.msg_json).picUrl)
                      "
                    >
                    </el-image>
                    <span
                      v-if="
                        item.type == 'sendMessage' &&
                        JSON.parse(item.msg_json).type == 'text' &&
                        isURL(JSON.parse(item.msg_json).contents) == false
                      "
                      >{{ JSON.parse(item.msg_json).contents }}</span
                    >
                    <span
                      class="urlMsg"
                      v-if="
                        item.type == 'sendMessage' &&
                        JSON.parse(item.msg_json).type == 'text' &&
                        isURL(JSON.parse(item.msg_json).contents) == true
                      "
                      style="cursor: pointer"
                      @click="goUrl(JSON.parse(item.msg_json).contents)"
                      >{{ JSON.parse(item.msg_json).contents }}</span
                    >
                    <span
                      class="yuyueContents"
                      v-if="
                        item.type == 'sendMessage' &&
                        JSON.parse(item.msg_json).type == 'yuyue' 
                      "
                      style="cursor: pointer"
                      @click="goDingyue1(JSON.parse(item.msg_json).goods_id)"
                      >
                      <div class="tcleft">
                        <img :src="JSON.parse(item.msg_json).ggPic" alt="" />
                      </div>
                      <div class="tcright">
                        <h5>{{ JSON.parse(item.msg_json).ggTitle }}</h5>
                        <span>立即预约</span>
                      </div>
                    </span>
                  </div>
                </div>
                <!-- 中间的操作消息 -->
                <div
                  class="centerXx"
                  v-if="
                    item.type == 'jyall' ||
                    item.type == 'jy' ||
                    item.type == 'lh'
                  "
                >
                  <div class="jyall" v-if="item.type == 'jyall'">
                    <p>
                      <span style="color: #fff">管理员已将直播间</span>
                      <span style="color: #f84340">{{
                        JSON.parse(item.msg_json).contents
                      }}</span>
                    </p>
                  </div>
                  <div
                    class="jy"
                    v-if="
                      item.type == 'jy' &&
                      JSON.parse(item.msg_json).account_id == userId
                    "
                  >
                    <p>
                      <span style="color: #fff">您已被管理员</span>
                      <span style="color: #f84340">{{
                        JSON.parse(item.msg_json).contents
                      }}</span>
                    </p>
                  </div>
                  <div
                    class="lh"
                    v-if="
                      item.type == 'lh' &&
                      JSON.parse(item.msg_json).account_id == userId
                    "
                  >
                    <p>
                      <span style="color: #fff">您已被管理员</span
                      ><span style="color: #f84340">{{
                        JSON.parse(item.msg_json).contents
                      }}</span>
                    </p>
                  </div>
                  <!-- <div class="jyall"><p>管理员已开启全员静言</p></div> -->
                </div>
                <!-- 右边自己发的消息 -->
                <div
                  class="rightXx"
                  v-show="
                    item.type != 'jyall' &&
                    item.type != 'jy' &&
                    item.type != 'lh'
                  "
                  v-if="false"
                >
                  <div class="userInfo">
                    <img :src="item.file_url" v-if="item.file_url" />
                    <img
                      src="../../assets/img/mrtx.png"
                      v-if="!item.file_url"
                    />

                    <h3
                      v-show="JSON.parse(item.msg_json).is_gly == 1"
                      style="baclground: #0086ff"
                    >
                      管理员
                    </h3>
                    <h4>{{ item.title }}</h4>
                    <p v-if="item.type == 'init'">进入直播间</p>
                  </div>
                  <!-- <div class="welcome" v-if="item.type == 'init'">
                    <p>欢迎{{item.title}} 进入直播间</p>
                  </div> -->
                  <div class="msgInfo" v-if="item.type == 'sendMessage'">
                    <el-image
                      :src="JSON.parse(item.msg_json).picUrl"
                      v-show="JSON.parse(item.msg_json).picUrl"
                      :preview-src-list="
                        Array(JSON.parse(item.msg_json).picUrl)
                      "
                    >
                    </el-image>
                    <span
                      v-if="
                        item.type == 'sendMessage' &&
                        JSON.parse(item.msg_json).type == 'text' &&
                        isURL(JSON.parse(item.msg_json).contents) == false
                      "
                      >{{ JSON.parse(item.msg_json).contents }}</span
                    >
                    <span
                      class="urlMsg"
                      v-if="
                        item.type == 'sendMessage' &&
                        JSON.parse(item.msg_json).type == 'text' &&
                        isURL(JSON.parse(item.msg_json).contents) == true
                      "
                      style="cursor: pointer"
                      @click="goUrl(JSON.parse(item.msg_json).contents)"
                      >{{ JSON.parse(item.msg_json).contents }}</span
                    >
                  </div>
                </div>
              </div>
            </div>
            <div class="shenhe" v-if="msgsh_status == 1">
              <p style="color: #f84340">温馨提示：直播间已开启聊天审核</p>
            </div>

            <div class="shuru" v-if="canSend && (bm_status == 1 || is_gly == 1)">
              <el-input
                type="text"
                v-model="value"
                @keyup.native.enter="sendMsg"
                maxlength="200"
                @input="shuru"
              />
              <span @click="sendMsg">发送</span>
            </div>

            <div class="shuru" v-if="!canSend || (bm_status == 0 && is_gly != 1)">
              <el-input
                type="text"
                v-model="value"
                @keyup.native.enter="sendMsg"
                maxlength="200"
                @input="shuru"
                disabled
              />
              <span @click="NosendMsg" style="background: #ccc">发送</span>
            </div>
            <div class="doSome" v-if="is_gly == 1">
              <div class="sendPic doBox" @click="zh_uploadFile">
                <i class="el-icon-picture-outline"></i>
                <h3>发图片</h3>
              </div>
              <input
                type="file"
                ref="evfile"
                @change="zh_uploadFile_change"
                style="display: none"
              />
              <div class="userGl doBox" @click="goLiveManage">
                <i class="el-icon-user"></i>
                <h3>用户管理</h3>
              </div>
              <div class="alljy doBox" @click="jyAll" v-show="jyFlag == false">
                <i class="el-icon-turn-off-microphone"></i>
                <h3>全员禁言</h3>
              </div>
              <div class="alljy doBox" @click="jyAll" v-show="jyFlag == true">
                <i
                  class="el-icon-turn-off-microphone"
                  style="color: #f84340"
                ></i>
                <h3 style="color: #f84340">全员禁言</h3>
              </div>
              <div class="shenhe doBox" @click="goPlsh">
                <i class="el-icon-chat-dot-square"></i>
                <h3>评论审核</h3>
              </div>
            </div>
          </div>
          <div class="tab2" v-show="rightFlag == 2 && ckts_file_url">
            <div class="bookContents">
              <img :src="product_info.file_url" alt="" />
              <div class="" v-html="product_info.contents"></div>
            </div>
            <div class="ewm">
              <div class="pic">
                <img :src="ckts_file_url" alt="" />
              </div>
              <div class="msg">
                <p>打开微信扫码查看</p>
                <p>便捷获取图书信息，即可在线试读</p>
              </div>
            </div>
          </div>
          <div class="tab2 nobook" v-show="rightFlag == 2 && !ckts_file_url">
            <div class="bookContents">
              <h3>暂无参考图书</h3>
            </div>
          </div>
          <div class="tab3" v-show="rightFlag == 3">
            <div class="danyuan" v-for="item in zhang_lists" :key="item.id">
              <div class="mltitle" @click="choseDy(item.id, item.zytj_status)">
                <h3>{{ item.title }}</h3>
                <div class="jiantou">
                  <span
                    ><img
                      src="../../assets/img/acrestop.png"
                      v-if="mulutapValue == item.id"
                  /></span>
                  <span
                    ><img
                      src="../../assets/img/acresdown.png"
                      v-if="mulutapValue != item.id"
                  /></span>
                </div>
              </div>
              <div
                class="muluLists"
                v-show="mulutapValue == item.id"
                :class="{
                  nowmulu: zhangjie_id == list.id,
                  beforemulu:
                    list.start_time_true * 1000 > new Date().getTime(),
                }"
                v-for="(list, index) in item.jie_lists"
                :key="list.id"
              >
                <div class="leftTips" v-show="list.xxjd_info.status == 2"></div>
                <div
                  class="leftTips"
                  style="background-color: #08a579"
                  v-show="
                    list.xxjd_info.status != 2 &&
                    list.start_time_true * 1000 < new Date().getTime()
                  "
                ></div>
                <div
                  class="leftTips"
                  style="background-color: #ccc"
                  v-show="list.start_time_true * 1000 > new Date().getTime()"
                ></div>
                <div class="muluIndex">
                  <h3>0{{ index + 1 }}</h3>
                </div>
                <div class="mulumsg">
                  <div class="listTitle">
                    {{ list.title }}
                  </div>
                  <div class="mulubottom">
                    <div class="timelong">
                      {{ formatSeconds(list.shichang) }}
                    </div>
                    <div class="studyjd">
                      学习进度：{{ list.xxjd_info.jd }}%
                    </div>
                  </div>
                </div>
                <div class="muluright">
                  <div
                    class="yixuewan zhuangtai"
                    v-show="
                      list.xxjd_info.status == 2 &&
                      list.start_time_true * 1000 < new Date().getTime()
                    "
                    @click="syudyJie(list.id)"
                  >
                    <img src="../../assets/img/acresyixuewan.png" alt="" />
                    <span>已学完</span>
                  </div>
                  <div
                    class="yixuewan zhuangtai"
                    v-show="
                      zhangjie_id == list.id && list.xxjd_info.status != 2
                    "
                  >
                    <img src="../../assets/img/acresxuexizhong.png" alt="" />
                    <span>学习中</span>
                  </div>
                  <div
                    class="yixuewan zhuangtai"
                    v-show="
                      list.xxjd_info.status != 2 &&
                      list.start_time_true * 1000 < new Date().getTime() &&
                      zhangjie_id != list.id
                    "
                    @click="syudyJie(list.id)"
                  >
                    <img src="../../assets/img/acresweixuexi.png" alt="" />
                    <span>未学习</span>
                  </div>
                  <div
                    class="yixuewan zhuangtai"
                    v-show="list.start_time_true * 1000 > new Date().getTime()"
                  >
                    <img src="../../assets/img/acresweikaiqi.png" alt="" />
                    <span>未开启</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="tab4" v-show="rightFlag == 4">
            <div class="goodLists">
              <div class="goodsBox" v-for="item in goodsLists" :key="item.id">
                <div class="pic">
                  <img :src="item.file_url" alt="">
                </div>
                <div class="details">
                  <h3>{{item.title}}</h3>
                  <p>{{item.sub_title}}</p>
                  <span @click="goDingyue1(item.lists[0].goods_id)" v-if="item.gm_status == 0">立即预约</span>
                  <span @click="goDingyue1(item.lists[0].goods_id)" style="background:#ccc;" v-if="item.gm_status == 1">已预约</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="jcjxVideo" v-if="jcjxShow">
      <div
        class="videoBox"
        @mouseenter="
          ztBtZzShow == false ? (sbEnterShow = true) : (sbEnterShow = false)
        "
        @mouseleave="sbEnterShow = false"
      >
        <LivePlayer
          ref="livePlayer"
          :videoUrl="video_file_url"
          :poster="file_url"
          controls
          :show-custom-button="true"
          :loading="true"
        >
        </LivePlayer>
        <div class="btZz" v-if="sbEnterShow">
          <div class="zzTop">
            <h3>{{ title }}</h3>
          </div>
        </div>
        <div class="zhezhao" v-if="ztBtZzShow">
          <div class="zzTop">
            <h3>{{ title }}</h3>
          </div>
        </div>
        <div class="shikan" v-if="true">
          <div class="left">
            <h3>全学年教学服务包抢订中</h3>
          </div>
          <span @click="goDingyue">免费试用</span>
        </div>
      </div>
      <div class="right">
        <div class="rightTitle">
          <h4>课程目录</h4>
          <span>{{ jieList.length }} 讲</span>
        </div>
        <div class="zhangjie">
          <div class="danyuan" v-for="item in zhang_lists" :key="item.id">
            <h4>{{ item.title }}</h4>
            <div
              class="jie"
              v-for="(list, index) in item.jie_lists"
              :key="list.id"
              @click="
                syudyJie(
                  list.id,
                  list.videos_id,
                  list.is_sf,
                  list.expect_up_time
                )
              "
              :class="{ chosejie: videos_id == list.videos_id }"
            >
              <div class="left">
                <img
                  src="../../assets/img/activeNew/zj_play.png"
                  v-if="
                    (gm_status == 1 || list.is_sf == 0) &&
                    videos_id != list.videos_id
                  "
                />
                <img
                  src="../../assets/img/activeNew/zj_suo.png"
                  v-if="gm_status == 0 && list.is_sf != 0"
                />
                <img
                  src="../../assets/img/activeNew/zj_xuexizhong.png"
                  v-if="
                    (gm_status == 1 || list.is_sf == 0) &&
                    videos_id == list.videos_id
                  "
                />
              </div>
              <div class="zj_right">
                <p>0{{ index + 1 }}.{{ list.title }}</p>
                <div class="msg">
                  <div class="shichang">课程时长：{{ list.shichang }}min</div>
                  <div class="jindu">已学习：{{ list.xxjd }}%</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dingzhi" v-if="jcjxShow">
      <div class="dingzhiTitle">
        <h4>定制资源包推荐</h4>
        <span></span>
      </div>
      <div class="dingzhiLists">
        <div class="dingzhiBox" v-for="item in dingzhiLists" :key="item.id">
          <div class="dztop">
            <img src="../../assets/img/ziyuanbaonew.png" alt="" />
            <h4>{{ item.title }}</h4>
          </div>
          <div class="dzBottom">
            <span>订阅资源</span>
          </div>
        </div>
      </div>
    </div>
    <div class="teacher" v-if="!ggVideoShow">
      <h4 @click="ceshi">主讲名师</h4>
      <div class="details">
        <div class="left">
          <div class="pic"><img :src="teachers_file_url" alt="" /></div>
          <div class="msg">
            <h4>{{ teachers_title }}</h4>
            <p>{{ teachers_zhicheng }}</p>
          </div>
        </div>
        <div class="right">
          <p>{{ teachers_sub_title }}</p>
        </div>
      </div>
    </div>
    <div class="content" v-if="true">
      <div class="left">
        <div class="tapsHeader">
          <div
            class="taps"
            v-for="item in activitymenu_lists"
            :key="item.id"
            :class="{ choseTaps: tapsRadio == item.id }"
          >
            <div class="tapsTitle">{{ item.title }}</div>
            <span></span>
          </div>
        </div>
        <!-- 活动介绍 -->
        <div class="tab1" v-if="tapsRadio == 1 && contents != ''">
          <div v-html="contents"></div>
        </div>
        <!-- 活动介绍无内容展示 -->
        <div class="tab11" v-if="tapsRadio == 1 && contents == ''">
          <div class="nothing">
            <img src="../../assets/img/nothing.png" alt="" />
          </div>
        </div>
      </div>
      <div class="right" v-if="acShow">
        <div class="ac">
          <h3>相关推荐</h3>
          <div class="acLists">
            <div class="acBox" v-for="item in tj_lists" :key="item.id">
              <div class="left">
                <img :src="item.file_url" alt="" />
              </div>
              <div class="acRight">
                <div class="title">{{ item.title }}</div>
                <div class="msg">
                  <p style="color: #656565">{{ item.jcjxksub_nums }} 讲</p>
                  <p style="color: #999999">
                    <img src="../../assets/img/activeNew/eyes.png" alt="" />{{
                      item.view_nums
                    }}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 教材教学提示弹窗 -->
    <div class="tipsTc">
      <el-dialog :visible.sync="dialogVisible1" width="810px" top="20vh">
        <div class="tcBox">
          <h4>订阅提示</h4>
          <p>
            该课程将于
            {{ timeStamp2String(expect_up_time * 1000, 8) }} 可解锁学习
          </p>
          <p>
            您可以订阅<span>【{{ goods_title }}】</span>
          </p>
          <p>订阅成功后，我们将在课程开放时自动为您进行推送</p>
          <div class="goBuy" @click="goDy">去订阅</div>
        </div>
      </el-dialog>
    </div>
    <!-- 教材教学提示弹窗 -->
    <div class="tipsTc">
      <el-dialog :visible.sync="dialogVisible2" width="810px" top="20vh">
        <div class="tcBox">
          <h4>订阅提示</h4>
          <p>
            当前资源为付费资源，需要订阅<span>【2023高一语文定制资源包】</span>才可以解锁查看
          </p>
          <div class="goBuy">去订阅</div>
        </div>
      </el-dialog>
    </div>
    <!-- 教材教学提示弹窗 -->
    <div class="tipsTc">
      <el-dialog :visible.sync="dialogVisible3" width="810px" top="20vh">
        <div class="tcBox">
          <h4>订阅提示</h4>
          <p>
            本系列课程已更新到{{
              ygx_sub_nums
            }}节，资源包订阅成功后这些课程您都可以随时观看
          </p>
          <p>
            还有{{
              wgx_sub_nums
            }}节未更新的课程，您在订阅成功后也需要在课程更新后才能看哦！
          </p>
          <div class="goBuy">去订阅</div>
        </div>
      </el-dialog>
    </div>
    <!-- 报名时个人信息不完善，提交信息弹窗 -->
    <UserInfoBox
      v-if="userMsgShow"
      :yymsg="yymsg"
      @openSuccessTc="openSuccessTc"
    ></UserInfoBox>
    <!-- 预约成功弹窗 -->
    <YuyueBox
      v-if="signSuccess"
      :yymsg="yymsg"
      @closeYytc="closeYytc"
    ></YuyueBox>
    <!-- 活动未加企业微信弹窗 -->
    <HdqwEvm
      v-if="hdQwShow"
      :hdkf_file_url="hdkf_file_url"
      @qwtcClose="qwtcClose"
    ></HdqwEvm>
  </div>
</template>

<script>
import LivePlayer from "@liveqing/liveplayer"; // vue2
import HdqwEvm from "../../components/hdqwEvm/hdqwEvm"; // vue2
import YuyueBox from "../../components/yuyueBox/yuyueBox.vue"; // vue2
import UserInfoBox from "../../components/userInfoBox/userInfoBox.vue"; // vue2

import {
  info_activity,
  chatinfo,
  qiniuconfig,
  page_times,
  sysinfo,
  data_activity,
  chatmsglists,
  info_activityjie,
  playtimes_activity,
  info_jcjxk,
  info_videos,
  list_goods,
  list_activityfl,
  qywx_status,
  userinfo,
  bm_activity,
  kemulists,
  getggbyactivity,
  getkfinfobyip
} from "../../api/http";
import { unique } from "../../utils/unique";
import { timeStamp2String } from "../../utils/time";
import * as qiniu from "qiniu-js";
export default {
  inject: ["reload"], //刷新页面
  props: ["kefuMsg"],
  components: {
    LivePlayer,
    UserInfoBox,
    YuyueBox,
    HdqwEvm,
  },
  data() {
    return {
      timeStamp2String,
      active_id: 0, //活动id
      title: "", //活动标题
      activityfl_id: "", //当前活动分类id
      gzh_file_url: "", //公众号图片地址
      zb_status: 0, //直播状态
      start_time: "", //给定的直播开始时间
      start_time_true: "", //真实开始直播时间
      end_time: "", //给定的直播结束时间
      end_time_true: "", //直播真实的结束时间
      zb_file_url: "", //直播地址
      video_file_url: "", // 视频回放地址
      activitytheme_title: "", //活动主题名称
      rightFlag: 2, //右侧展示
      // activeName: "1", //右侧默认tab值
      screenWidth: document.body.clientWidth, //窗口大小
      playFlag: true, //播放按钮的显示隐藏
      file_url: "", // 视频封面图
      send: null, //发送方法
      seek: "", //视频进度

      //聊天室
      socket: null, //socket建立的连接
      chat_id: "", //聊天室id
      chat_url: "", //连接地址
      userId: "", //我的id
      msgList: [], //消息列表
      youtxFile: "", //对方头像
      mytxFile: "", //我的头像
      mynickname: "", //我的昵称
      jy_status: 0, //直播间禁言状态
      jy_status_my: 0, //我的禁言状态
      lh_status_my: 0, //我的拉黑状态
      is_gly: "", //我是否是管理员
      msgsh_status: "", //是否开启聊天室审核
      canSend: "", //是否可发消息
      value: "", //输入框内容
      kj_download_file_url: "", //可能发送的图片
      info: [], //消息列表
      arr: [], //未去重消息列表
      timeNow: "", //每秒更新的当前时间
      unique, //去重方法
      jyFlag: false, //是否静言聊天室
      online_limit: "", //心跳包
      isLh: false, //是否显示拉黑的内容

      //参考图书
      ckts_file_url: "", //参考图书二维码
      product_info: "", //参考图书

      online_nums: "", //直播在线人数

      page: 1, //加载更多消息分页用，从第二页开始为未加载的历史消息
      page_size: 50, //加载更多消息分页数量用，每页五十条
      historyShow: true, //是否还有未加载的历史消息

      // 4.2版本迭代
      type_id: "", //系列活动2，普通活动1
      zhang_lists: [], //章节目录
      mulutapValue: "", //当前展开的是第几单元
      zhangjie_id: "", //系列活动下选中的章节id
      jieSeekTime: null, //上报活动时间定时器

      //活动升级
      acType: "", //活动类型
      fltitle: "", //当前活动对应的分类标签  用于面包屑
      ggVideoShow: false, //播放广告内容展示
      ggUrl: "", //广告视频链接
      ggFile_url: "", //广告视频封面
      activitymenu_lists: [], //初始化的左下tap栏标签列表
      teachers_file_url: "", //老师头像
      teachers_title: "", //老师姓名
      teachers_zhicheng: "", //老师职称
      teachers_sub_title: "", //老师简介
      acDjsTimer: null, //直播活动开始倒计时
      //未开始活动
      gg_video_file_url: "", //广告视频地址
      gg_file_url: "", //广告封面地址
      bm_status: "", //报名状态
      wbmhfck:'',//未报名是否可查看回访
      //普通可播放活动
      ptAcShow: false,
      //教材教学活动
      jcjxShow: false,
      goods_id: "", //活动对应付费资源包商品id
      goods_title: "", //活动对应付费资源包商品名称
      gm_status: "", //教材教学收否解锁购买
      videos_id: "", //当前点击播放学习的小节
      expect_up_time: "", //选中小节的预计更新时间
      //定制资源包推荐
      kemu_id: "", //科目id
      nianji_id: "", //年级id
      dingzhiLists: [], //定制资源包列表
      //下半部分内容
      tapsRadio: 1, //tap栏的切换值
      contents: "", //活动介绍
      //右侧产品推荐
      tj_lists: [], //推荐活动
      acShow: true, //右侧推荐活动是否展示
      jieList: [], //全部章节

      userMsgShow: false, //报名时完善信息弹窗
      signSuccess: false, //报名弹窗显示隐藏
      yymsg: {}, //预约成功信息
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,

      ygx_sub_nums: "", //已更新小节数量
      wgx_sub_nums: "", //未更新小节数量

      //视频遮罩类
      sbEnterShow: false, //鼠标移入视频展示标题
      ztBtZzShow: true, //视频暂停时展示标题遮罩
      zzTimer: null, //暂停遮罩展示判断定时

      hdQwShow: false, //活动未添加企业微信的弹窗展示
      hdkf_file_url: "", //活动企微客服二维码

      qwTimer: null, //十分钟企业微信定时

      //直播间弹窗广告
      tcggShow: false, //弹窗广告是否展示
      ggPic: "", //弹窗广告封面
      ggTitle: "", //弹窗广告标题
      ggId: "", //弹窗广告id
      // tcggTimer: null, //每隔十秒获取一次弹窗广告

      goodsLists:[],//商品列表
      
      pageTimer:null,//上报停留时长

      hklt_status:'',//活动回看是否展示互动答疑
      
      jinduTimer:null,//获取视频播放进度的定时器
      jindu:'',//当前播放进度/秒
      ggList:[],//广告列表
      closeggId:"",//关闭的广告id
    };
  },
  created() {
    //console.log(this.$route.query, "query");
    if (this.$route.query.type) {
      //获取活动类型
      this.acType = this.$route.query.type;
    }
    this.from = this.$route.query.from;
    //获取活动id
    this.active_id = this.$route.query.id;

    console.log(this.$route.query);

    if (this.acType == "hd") {
      this.getPersonlNum(); //获取直播在线人数
      this.getAcInfo(); //获取活动详情
      this.ptAcShow = true;
      this.getTcgg();
      this.ggVideoShow = false;
      this.jcjxShow = false;
    } else if (this.acType == "jcjx") {
      this.getJcjxInfo(); //获取教学教材课详情
      this.fltitle = "教材教学";
      this.ptAcShow = false;
      this.ggVideoShow = false;
      this.jcjxShow = true;
    }
  },
  mounted() {
    console.log(this.$route.query);
    console.log(this.acType);
    //获取系统信息里的上报时长
    sysinfo({
      md5key: localStorage.getItem("md5key"),
    }).then((res) => {
      const times = res.retRes.page_times;
      //上报停留时长
      this.pageTimer = setInterval(() => {
        page_times({
          table_name: "activity",
          row_id: this.active_id,
          times: 60,
        });
      }, times * 1000);
    });

    // this.tcggTimer = setInterval(() => {
      // this.getTcgg();
    // }, 10000);
    // if(localStorage.getItem('ggtc')){
    //   getggbyactivity({
    //     md5key: localStorage.getItem("md5key"),
    //     activity_id: this.active_id,
    //   }).then((res) => {
    //     console.log(res, "弹窗广告信息");
    //     if (res.retRes.id) {
    //       this.ggPic = res.retRes.file_url;
    //       this.ggTitle = res.retRes.title;
    //       this.ggId = res.retRes.id;
    //       this.goods_id = res.retRes.goods_id;
    //     }
    //   });
    // }else{
    //   //每隔十秒获取一次弹窗广告
    //     this.tcggTimer = setInterval(() => {
    //       this.getTcgg();
    //     }, 10000);
    // }
    console.log(localStorage.getItem('ggtc'))
    

    //遮罩
    setTimeout(() => {
      if (this.$refs.livePlayer) {
        this.zzTimer = setInterval(() => {
          const zt = this.$refs.livePlayer.paused();
          if (zt == false) {
            //没有暂停
            this.ztBtZzShow = false;
          } else if (zt == true) {
            this.ztBtZzShow = true;
          }
          // console.log(this.$refs.livePlayer)
        }, 200);
      }
    }, 1000);

    
  },
  beforeDestroy() {
    clearInterval(this.pageTimer);
    this.pageTimer = null;

    clearInterval(this.evmTimer);
    this.evmTimer = null;

    clearInterval(this.acDjsTimer);
    this.acDjsTimer = null;

    clearInterval(this.zzTimer);
    this.zzTimer = null;

    clearInterval(this.qwTimer);
    this.qwTimer = null;

    // clearInterval(this.tcggTimer);
    // this.tcggTimer = null;

    clearInterval(this.jinduTimer);
    this.jinduTimer = null;

    //上传观看时长
    // playtimes_activity({
    //   md5key: localStorage.getItem("md5key"),
    //   id: this.zhangjie_id,
    //   times: this.$refs.livePlayer.getCurrentTime(),
    // });

    clearInterval(this.jieSeekTime);
    this.jieSeekTime = null;
  },
  watch: {
    //监听窗口大小改变
    screenWidth(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.timer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenWidth = val;
        this.timer = true;
        let that = this;
        let box = document.getElementsByClassName("Box")[0];
        // let title = document.getElementsByClassName("header1")[0];
        setTimeout(function () {
          // 打印screenWidth变化的值
          if (that.screenWidth > 1200 && that.screenWidth < 1440) {
            box.style.width = 1200 + "px";
            box.style.height = 472 + "px";
          } else if (that.screenWidth <= 1200) {
            box.style.width = 1200 + "px";
            box.style.height = 472 + "px";
          } else if (that.screenWidth >= 1440 && that.screenWidth < 1740) {
            box.style.width = 1440 + "px";
            box.style.height = 567 + "px";
          } else if (that.screenWidth >= 1740) {
            box.style.width = 1740 + "px";
            box.style.height = 685 + "px";
          }
          that.timer = false;
        }, 200);
      }
    },
  },

  methods: {
    //获取弹窗广告信息
    getTcgg() {
      getggbyactivity({
        md5key: localStorage.getItem("md5key"),
        activity_id: this.active_id,
      }).then((res) => {
        console.log(res.retRes[0].id, "弹窗广告信息");
        this.ggList = res.retRes;
        if (res.retRes[0].id) {
          this.ggPic = res.retRes[0].file_url;
          this.ggTitle = res.retRes[0].title;
          this.ggId = res.retRes[0].id;
          this.goods_id = res.retRes[0].goods_lists[0].id;
        } else {
          this.tcggShow = false;
        }
      });
    },
     //关闭弹窗广告
    closegg() {
      // clearInterval(this.tcggTimer);
      // this.tcggTimer = null;
      
      this.closeggId = this.ggId;
      this.tcggShow = false;
      const msg_data = {
        type: "yuyue",
        contents: '',
        is_gly: this.is_gly,
        create_time: parseInt(new Date().getTime()),
        ggPic:this.ggPic,
        ggTitle:this.ggTitle,
        goods_id:this.goods_id,
        ggId:this.ggId
      };
      this.info.push({
        activity_id:this.active_id,
        chat_id:this.chat_id,
        type:"sendMessage",
        title:'活动小助手',
        msg_json:JSON.stringify(msg_data),
      })
      console.log(this.info)
      //更新聊天室位置到最底部
      this.$nextTick(() => {
        var contentHeight = document.getElementsByClassName("xxLists")[0];
        contentHeight.scrollTop = contentHeight.scrollHeight;
      });
      // const arr = []
      // this.info.forEach(item=>{
      //   if(JSON.parse(item.msg_json).type == 'yuyue'){
      //     // console.log(JSON.parse(item.msg_json).ggId)
      //     arr.push(JSON.parse(item.msg_json).ggId)
      //   }
      // })
      // console.log(arr,this.ggId,"haha",arr.indexOf(this.ggId) == -1)
      // if(arr.indexOf(this.ggId) == -1){
      //   const contents = '点击此处立即前往预约'
      //   const data_arr = {
      //     chat_id: this.chat_id,
      //     type: "sendMessage",
      //     from_id: this.userId,
      //     title: "活动小助手",
      //     file_url: this.mytxFile,
      //   };
      //   const msg_data = {
      //     type: "yuyue",
      //     contents: contents,
      //     is_gly: this.is_gly,
      //     create_time: parseInt(new Date().getTime()),
      //     ggPic:this.ggPic,
      //     ggTitle:this.ggTitle,
      //     goods_id:this.goods_id,
      //     ggId:this.ggId
      //   };
      //   data_arr["msg_json"] = JSON.stringify(msg_data);
      //   const data_str = JSON.stringify(data_arr);
      //   this.socket.send(data_str);
      // }
    },
    ceshi(){
      // console.log(this.info)
      // const arr = []
      // this.info.forEach(item=>{
      //   if(JSON.parse(item.msg_json).type == 'yuyue'){
      //     // console.log(JSON.parse(item.msg_json).ggId)
      //     arr.push(JSON.parse(item.msg_json).ggId)
      //   }
      // })
      // console.log(arr)
      // console.log(this.ggId)
      // console.log(arr.indexOf(this.ggId))
    },
    //关闭企业微信弹窗
    qwtcClose() {
      this.hdQwShow = false;
      this.$refs.livePlayer.play();
      this.qwTimer = setInterval(() => {
        
        qywx_status({
          md5key: localStorage.getItem("md5key"),
          // kf_account:this.kefuMsg.hdkf_account
        }).then((res) => {
          console.log(res);
          if (res.retRes.qywx_status == 0) {
            getkfinfobyip({
              md5key: localStorage.getItem("md5key"),
            }).then(res=>{
                this.hdkf_file_url = res.retRes.local_hdkf_info.file_url;
                this.hdQwShow = true;
                this.$refs.livePlayer.pause();
            })
          }
        });
      }, 600000);
    },
    //获取直播在线人数
    getPersonlNum() {
      data_activity({
        md5key: localStorage.getItem("md5key"),
        activity_id: this.active_id,
      }).then((res) => {
        console.log(res, "直播间在线人数");
        this.online_nums = res.retRes.online_nums;
      });
    },
    //获取活动详情
    getAcInfo() {
      info_activity({
        md5key: localStorage.getItem("md5key"),
        id: this.active_id,
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res, "活动详情");
          const data = res.retRes;
          this.active_id = data.id;
          this.title = data.title;
          this.activityfl_id = data.activityfl_id;
          this.contents = data.contents;
          this.tj_lists = data.tj_lists;
          this.gzh_file_url = data.gzh_file_url;
          this.kemu_id = data.kemu_id;
          this.getGoods();//获取商品列表
          this.zb_status = data.zb_status;
          this.file_url = data.file_url;
          this.start_time = data.start_time;
          this.start_time_true = data.start_time_true;
          this.end_time = data.end_time;
          this.end_time_true = data.end_time_true;
          this.activitytheme_title = data.activitytheme_title;
          this.ckts_file_url = data.ckts_file_url;
          this.product_info = data.product_info;
          this.type_id = data.type_id;
          this.zhang_lists = data.zhang_lists;
          this.teachers_file_url = data.teachers_file_url;
          this.teachers_title = data.teachers_title;
          this.teachers_zhicheng = data.teachers_zhicheng;
          this.teachers_sub_title = data.teachers_sub_title;
          this.zb_file_url = data.zb_file_url;
          this.video_file_url = data.video_file_url;
          this.gg_video_file_url = data.gg_video_file_url;
          this.gg_file_url = data.gg_file_url;
          this.zb_status = data.zb_status;
          this.bm_status = data.bm_status;
          this.wbmhfck = data.wbmhfck;

          this.hklt_status = data.hklt_status;
          console.log(this.zb_status, this.bm_status, "aaaaa");
          if(data.zb_status == 3 && this.bm_status == 1 && (this.zb_file_url || (this.video_file_url != '' && this.video_file_url != '*'))){
              this.jinduTimer = setInterval(() => {
                this.jindu = this.$refs.livePlayer.getCurrentTime()
                this.ggList.forEach(item=>{
                  if(item.second<=this.jindu && item.second + 60 >= this.jindu && this.closeggId != item.id){
                    this.ggId = item.id;
                    console.log(item.title)
                    this.ggPic = item.file_url;
                    this.ggTitle = item.title;
                    this.goods_id = item.goods_lists[0].id;
                    this.tcggShow = true;
                  }else if(item.second + 60<this.jindu && item.second + 61 >= this.jindu && this.closeggId != item.id){
                    this.closegg()
                  }
                })
              }, 1000);
          }else if(data.zb_status == 2 && this.bm_status == 1 && this.zb_file_url){
            this.jinduTimer = setInterval(() => {
                // this.jindu = this.$refs.livePlayer.getCurrentTime()
                this.jindu = parseInt(new Date().getTime() / 1000)-data.start_time;
                console.log(this.jindu)
                this.ggList.forEach(item=>{
                  if(item.second<=this.jindu && item.second + 60 >= this.jindu && this.closeggId != item.id){
                    this.ggId = item.id;
                    console.log(item.title)
                    this.ggPic = item.file_url;
                    this.ggTitle = item.title;
                    this.goods_id = item.goods_lists[0].id;
                    this.tcggShow = true;
                  }else if(item.second + 60<this.jindu && item.second + 61 >= this.jindu && this.closeggId != item.id){
                    this.closegg()
                  }
                })
              }, 1000);
          }
          //右侧展示内容
          if (data.zb_status == 1) {
            this.ggVideoShow = true;
            this.ptAcShow = false;
          } else if (data.zb_status == 3 && this.hklt_status != 1) {
            this.rightFlag = 4;
            this.ggVideoShow = false;
            this.ptAcShow = true;
          }else if (data.zb_status == 3 && this.hklt_status == 1) {
            this.rightFlag = 1;
            this.ggVideoShow = false;
            this.ptAcShow = true;
          } else {
            this.rightFlag = 1;
            this.ggVideoShow = false;
            this.ptAcShow = true;
          }
          //已报名或活动已结束且无回放 未添加企业微信的弹出添加企微弹窗并暂停播放
          if (data.bm_status == 1) {
            setTimeout(() => {
              qywx_status({
                md5key: localStorage.getItem("md5key"),
                // kf_account:this.kefuMsg.hdkf_account
              }).then((res) => {
                console.log(res);
                if (res.retRes.qywx_status == 0) {
                  getkfinfobyip({
                    md5key: localStorage.getItem("md5key"),
                  }).then(res=>{
                      this.hdkf_file_url = res.retRes.local_hdkf_info.file_url;
                      this.hdQwShow = true;
                      this.$refs.livePlayer.pause();
                  })
                }
              });
              // getkfinfobyip({
              //   md5key: localStorage.getItem("md5key"),
              // }).then(res=>{
              //   if(res.retRes.local_hdkf_status == 0){
              //     this.hdkf_file_url = res.retRes.local_hdkf_info.file_url;
              //     this.hdQwShow = true;
              //     this.$refs.livePlayer.pause();
              //   }
              // })
              // this.hdkf_file_url = this.kefuMsg.hdkf_file_url;
              // qywx_status({
              //   md5key: localStorage.getItem("md5key"),
              //   // kf_account:this.kefuMsg.hdkf_account
              // }).then((res) => {
              //   console.log(res);
              //   if (res.retRes.qywx_status == 0) {
              //     this.hdQwShow = true;
              //     this.$refs.livePlayer.pause();
              //   }
              // });
            }, 2000);
          } else if (
            data.zb_status == 3 &&
            (data.video_file_url == "" || data.video_file_url == "*")
          ) {
            setTimeout(() => {
              qywx_status({
                md5key: localStorage.getItem("md5key"),
                // kf_account:this.kefuMsg.hdkf_account
              }).then((res) => {
                console.log(res);
                if (res.retRes.qywx_status == 0) {
                  getkfinfobyip({
                    md5key: localStorage.getItem("md5key"),
                  }).then(res=>{
                      this.hdkf_file_url = res.retRes.local_hdkf_info.file_url;
                      this.hdQwShow = true;
                      this.$refs.livePlayer.pause();
                  })
                }
              });
              // getkfinfobyip({
              //   md5key: localStorage.getItem("md5key"),
              // }).then(res=>{
              //   if(res.retRes.local_hdkf_status == 0){
              //     this.hdkf_file_url = res.retRes.local_hdkf_info.file_url;
              //     this.hdQwShow = true;
              //     this.$refs.livePlayer.pause();
              //   }
              // })
              // this.hdkf_file_url = this.kefuMsg.hdkf_file_url;
              // qywx_status({
              //   md5key: localStorage.getItem("md5key"),
              //   // kf_account:this.kefuMsg.hdkf_account
              // }).then((res) => {
              //   console.log(res);
              //   if (res.retRes.qywx_status == 0) {
              //     this.hdQwShow = true;
              //   }
              // });
            }, 2000);
          }

          //直播和录播需要的东西
          if (this.$route.query.type == "hd" && data.zb_status != 1) {
            this.getChatinfo(); //获取聊天室信息
            //获取窗口大小，适应不同屏幕下的全屏直播间尺寸
            const that = this;
            let box = document.getElementsByClassName("Box")[0];
            if (that.screenWidth > 1200 && that.screenWidth < 1440) {
              box.style.width = 1200 + "px";
              box.style.height = 472 + "px";
            }
            // else if (that.screenWidth <= 1200) {
            //   box.style.width = 1000 + "px";
            //   box.style.height = 393.75 + "px";
            // }
            else if (that.screenWidth >= 1440 && that.screenWidth < 1740) {
              box.style.width = 1440 + "px";
              box.style.height = 567 + "px";
            } else if (that.screenWidth >= 1740) {
              box.style.width = 1740 + "px";
              box.style.height = 685 + "px";
            }
            window.onresize = () => {
              return (() => {
                window.screenWidth = document.body.clientWidth;
                that.screenWidth = window.screenWidth;
              })();
            };
            setTimeout(() => {
              //确保每次刷新聊天内容都在最底
              const contentHeight =
                document.getElementsByClassName("xxLists")[0];
              contentHeight.scrollTop = contentHeight.scrollHeight;
              console.log(contentHeight.scrollHeight);
            }, 1000);
          }
          // 进入页面自动播放;
          setTimeout(() => {
            this.click1();
            console.log(this.$refs.livePlayer, "1052222222");
            this.$refs.livePlayer.setVolume(0.9);
            this.$refs.livePlayer.setCurrentTime(this.seek);
            localStorage.setItem("seek", "");
          }, 500);

          list_activityfl({
            md5key: localStorage.getItem("md5key"),
            kemu_id: this.kemu_id,
          }).then((res) => {
            const fl = res.retRes;
            console.log(res, "活动分类及标签");
            fl.forEach((item) => {
              if (item.id == this.activityfl_id) {
                this.fltitle = item.title;
              }
            });
          });

          //活动开始倒计时
          this.timeNow = new Date().getTime();
          this.acDjsTimer = setInterval(() => {
            this.timeNow = new Date().getTime();
            // if(!this.gg_video_file_url && parseInt((this.start_time_true * 1000 - this.timeNow) / 3600000 / 24) == 0
            // && parseInt((this.start_time_true * 1000 - this.timeNow) / 3600000 % 24) == 0
            // && parseInt(((this.start_time_true * 1000 - this.timeNow) / 1000 / 60) % 60) == 0
            // && parseInt(((this.start_time_true * 1000 - this.timeNow) / 1000) % 60) == 0)
            // {
            //   // this.reload()
              
            // setTimeout(()=>{
            //     this.$router.push({
            //     name:'ActiveDetails',
            //     query:{
            //       id: this.$route.query.id,
            //     }
            //   })
            //   },2000)
            // }
            // console.log(this.start_time_true)
            // console.log(this.timeNow)
            if(this.start_time_true*1000 - this.timeNow < 0  && this.start_time_true*1000 - this.timeNow > -1000){
              this.$router.push({
                name:'ActiveDetails',
                query:{
                  id: this.$route.query.id,
                }
              })
            }
          }, 1000);
          
          this.activitymenu_lists = data.activitymenu_lists.slice(0, 1);

          //是否展示右侧产品
          if (data.tj_lists && data.tj_lists.length != 0) {
            this.acShow = true;
          } else {
            this.acShow = false;
          }
        }
      });
    },
    //获取聊天室信息
    getChatinfo() {
      chatinfo({
        md5key: localStorage.getItem("md5key"),
        activity_id: this.active_id,
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res, "聊天室信息");
          const data = res.retRes;
          this.chat_id = data.chat_id;
          this.chat_url = data.chat_url;
          this.mytxFile = data.file_url;
          this.userId = data.id;
          this.is_gly = data.is_gly;
          this.jy_status_my = data.jy_status_my;
          this.lh_status_my = data.lh_status;
          this.jy_status = data.jy_status;
          this.mynickname = data.title;
          this.online_limit = data.online_limit;
          this.msgsh_status = data.msgsh_status;
          this.initWebSocket(); //初始化websocket
          //进入直播间判断是否被拉黑
          if (this.lh_status_my == 1) {
            this.isLh = true;
          } else if (this.lh_status_my == 0) {
            this.isLh = false;
          }
          //按返回的心跳包时间间隔重新连接
          setInterval(() => {
            if (this.socket.readyState != WebSocket.OPEN) {
              console.log("断开了");
              this.socket = new WebSocket(this.path);
            }
            const data_arr = {
              chat_id: this.chat_id,
              type: "online",
              from_id: this.userId,
              title: this.mynickname,
              file_url: this.mytxFile,
            };
            const msg_data = {
              times: data.online_limit,
            };
            data_arr["msg_json"] = JSON.stringify(msg_data);
            const data_str = JSON.stringify(data_arr);
            this.socket.send(data_str);
          }, data.online_limit * 1000);
          //如果是管理员，显示管理员操作面板
          const glcz = document.getElementsByClassName("tab1")[0];
          if (this.is_gly == 0 && this.msgsh_status == 0) {
            //不是管理员，不审核信息
            glcz.style.height = "83.5%";
            if (
              this.jy_status_my == 1 ||
              this.lh_status_my == 1 ||
              this.jy_status == 1
            ) {
              //被禁言或被拉黑或聊天室禁言
              this.canSend = false; //发送按钮置灰，不可发送，弹框提示拉黑禁言
            } else if (
              this.jy_status_my == 0 &&
              this.lh_status_my == 0 &&
              this.jy_status == 0
            ) {
              //没禁言也没拉黑聊天室也没禁言
              this.canSend = true; //正常发，不审核
            }
          } else if (this.is_gly == 0 && this.msgsh_status == 1) {
            //不是管理员，开始审核消息
            glcz.style.height = "79.2%";
            if (this.jy_status_my == 1 || this.lh_status_my == 1) {
              //被禁言或被拉黑
              this.canSend = false; //发送按钮置灰，不可发送，弹框提示拉黑禁言
            } else if (this.jy_status_my == 0 && this.lh_status_my == 0) {
              //没禁言也没拉黑
              this.canSend = true; //正常发，需审核弹窗
            }
          } else if (this.is_gly == 1 && this.msgsh_status == 0) {
            //身份管理员，审核不受影响
            glcz.style.height = "75%";
            this.canSend = true;
          } else if (this.is_gly == 1 && this.msgsh_status == 1) {
            //身份管理员，审核不受影响
            glcz.style.height = "71.5%";
            this.canSend = true;
          }
          //被禁言
          if (this.jy_status == 1) {
            this.jyFlag = true;
          } else {
            this.jyFlag = false;
          }
        }
      });
    },
    //获取教材教学课程详情
    getJcjxInfo() {
      info_jcjxk({
        md5key: localStorage.getItem("md5key"),
        id: 2,
      }).then((res) => {
        console.log(res, "教材教学课详情");
        const data = res.retRes;
        this.active_id = data.id;
        this.title = data.title;
        this.file_url = data.file_url;
        this.zhang_lists = data.zhang_lists;
        this.goods_id = data.goods_id;
        this.gm_status = data.gm_status;
        data.zhang_lists.forEach((item) => {
          this.jieList.push(...item.jie_lists);
        });
        this.syudyJie(
          this.jieList[0].id,
          this.jieList[0].videos_id,
          this.jieList[0].is_sf,
          this.jieList[0].expect_up_time
        );
        this.contents = data.contents;
        this.tj_lists = data.tj_lists;
        this.teachers_file_url = data.teachers_info.file_url;
        this.teachers_title = data.teachers_info.title;
        this.teachers_zhicheng = data.teachers_info.zhicheng;
        this.teachers_sub_title = data.teachers_info.sub_title;

        this.kemu_id = data.kemu_id;
        this.nianji_id = data.nianji_id;
        this.getGoods();
        //已报名 未添加企业微信的谈窗
        setTimeout(() => {
          qywx_status({
            md5key: localStorage.getItem("md5key"),
            // kf_account:this.kefuMsg.hdkf_account
          }).then((res) => {
            console.log(res);
            if (res.retRes.qywx_status == 0) {
              getkfinfobyip({
                md5key: localStorage.getItem("md5key"),
              }).then(res=>{
                  this.hdkf_file_url = res.retRes.local_hdkf_info.file_url;
                  this.hdQwShow = true;
                  this.$refs.livePlayer.pause();
              })
            }
          });
          // getkfinfobyip({
          //   md5key: localStorage.getItem("md5key"),
          // }).then(res=>{
          //   if(res.retRes.local_hdkf_status == 0){
          //     this.hdkf_file_url = res.retRes.local_hdkf_info.file_url;
          //     this.hdQwShow = true;
          //     this.$refs.livePlayer.pause();
          //   }
          // })
          // this.hdkf_file_url = this.kefuMsg.hdkf_file_url;
          // qywx_status({
          //   md5key: localStorage.getItem("md5key"),
          //   // kf_account:this.kefuMsg.hdkf_account
          // }).then((res) => {
          //   console.log(res);
          //   if (res.retRes.qywx_status == 0) {
          //     this.hdQwShow = true;
          //     this.$refs.livePlayer.pause();
          //   }
          // });
        }, 2000);
      });
    },
    //获取商品列表，定制资源包推荐
    getGoods() {
      list_goods({
        md5key: localStorage.getItem("md5key"),
        kemu_id: this.kemu_id,
        // type: 1,
        // nianji_id:this.nianji_id
      }).then((res) => {
        console.log(res, "商品列表");
        this.goodsLists = this.dingzhiLists = res.retRes;
        this.dingzhiLists.forEach((item) => {
          if (this.goods_id == item.id) {
            this.goods_title = item.title;
          }
        });
      });
    },
    //报名 预约
    baoming() {
      this.yymsg.title = this.title;
      this.yymsg.active_id = this.active_id;
      //获取用户信息用于报名
      userinfo({
        md5key: localStorage.getItem("md5key"),
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res);
          const data = res.retRes;
          if (data.jbxx_set == 0) {
            this.userMsgShow = true;
          } else {
            bm_activity({
              md5key: localStorage.getItem("md5key"),
              activity_id: this.active_id,
              school_id: data.school_id,
              kemu_id: data.kemu_id,
              nianji_id: data.nianji_id,
              zhiwu_id: data.zhiwu_id,
              is_bzr: JSON.stringify(data.is_bzr),
              title: this.title,
              true_name: data.true_name,
              account: data.account,
              provincecode: data.provincecode,
              citycode: data.citycode,
              areacode: data.areacode,
            }).then((res) => {
              if (res.retInt == 1) {
                console.log(res, "报名成功");

                kemulists({
                  md5key: localStorage.getItem("md5key"),
                }).then((res) => {
                  res.retRes.forEach((item) => {
                    if (this.kemu_id == item.id) {
                      getkfinfobyip({md5key: localStorage.getItem("md5key"),}).then(res=>{
                        this.yymsg.file_url = res.retRes.local_hdkf_info.file_url;
                        this.yymsg.kemu_id = this.kemu_id;
                        this.signSuccess = true;
                      })
                      
                    }
                  });
                });

                // this.reload();
              }
            });
          }
        }
      });
    },
    //关闭弹窗
    closeYytc() {
      this.signSuccess = false;
      this.getAcInfo();
      // this.reload();
      //报名成功后关闭报名弹窗，判断是否添加地区企微
      qywx_status({
        md5key: localStorage.getItem("md5key"),
        // kf_account:this.kefuMsg.hdkf_account
      }).then((res) => {
        console.log(res);
        if (res.retRes.qywx_status == 0) {
          getkfinfobyip({
            md5key: localStorage.getItem("md5key"),
          }).then(res=>{
              this.hdkf_file_url = res.retRes.local_hdkf_info.file_url;
              this.hdQwShow = true;
              this.$refs.livePlayer.pause();
          })
        }
      });
      // getkfinfobyip({
      //   md5key: localStorage.getItem("md5key"),
      // }).then(res=>{
      //   if(res.retRes.local_hdkf_status == 0){
      //     this.hdkf_file_url = res.retRes.local_hdkf_info.file_url;
      //     this.hdQwShow = true;
      //     this.$refs.livePlayer.pause();
      //   }
      // })
      // this.hdkf_file_url = this.kefuMsg.hdkf_file_url;
      // qywx_status({
      //   md5key: localStorage.getItem("md5key"),
      //   // kf_account:this.kefuMsg.hdkf_account
      // }).then((res) => {
      //   console.log(res);
      //   if (res.retRes.qywx_status == 0) {
      //     this.hdQwShow = true;
      //     this.$refs.livePlayer.pause();
      //   }
      // });
    },
    //组件报名成功
    openSuccessTc() {
      kemulists({
        md5key: localStorage.getItem("md5key"),
      }).then((res) => {
        res.retRes.forEach((item) => {
          if (this.kemu_id == item.id) {
            this.yymsg.file_url = item.gzh_file_url;
            this.yymsg.kemu_id = this.kemu_id;
            this.signSuccess = true;
          }
        });
      });
    },
    //前往预约
    goDingyue() {
      // this.$router.push({
      //   name: "Dingzhi",
      //   query: {
      //     kemu_id: this.kemu_id,
      //     // nianji_id: this.nianji_id,
      //     type: "dy",
      //   },
      // });
      page_times({
        table_name: "activity",
        row_id: this.active_id,
      });
      let { href } = this.$router.resolve({
        path: "/dingzhi",
        query: {
          id: this.goods_id,
          kemu_id: this.kemu_id,
          type: "dy",
        },
      });
      window.open(href, "dingzhi");
    },
    //商品列表前往预约
    goDingyue1(id) {
      // this.$router.push({
      //   name: "Dingzhi",
      //   query: {
      //     kemu_id: this.kemu_id,
      //     // nianji_id: this.nianji_id,
      //     type: "dy",
      //   },
      // });
      page_times({
        table_name: "activity",
        row_id: this.active_id,
      });
      let { href } = this.$router.resolve({
        path: "/dingzhi",
        query: {
          id: id,
          kemu_id: this.kemu_id,
          type: "dy",
        },
      });
      window.open(href, "dingzhi");
    },
    //时间换算
    formatSeconds(value) {
      var secondTime = parseInt(value); // 秒
      var minuteTime = 0; // 分
      var hourTime = 0; // 小时
      if (secondTime > 60) {
        //如果秒数大于60，将秒数转换成整数
        //获取分钟，除以60取整数，得到整数分钟
        minuteTime = parseInt(secondTime / 60);
        //获取秒数，秒数取余，得到整数秒数
        secondTime = parseInt(secondTime % 60);
        //如果分钟大于60，将分钟转换成小时
        if (minuteTime > 60) {
          //获取小时，获取分钟除以60，得到整数小时
          hourTime = parseInt(minuteTime / 60);
          //获取小时后取余的分，获取分钟除以60取余的分
          minuteTime = parseInt(minuteTime % 60);
        }
      }
      var result = "" + parseInt(secondTime) + "s";

      if (minuteTime > 0) {
        result = "" + parseInt(minuteTime) + "m" + result;
      }
      if (hourTime > 0) {
        result = "" + parseInt(hourTime) + "h" + result;
      }
      console.log("result", result);
      return result;
    },
    //正则判断是否是链接地址
    isURL(str) {
      var reg = new RegExp(
        "(http://|https://)?((?:[A-Za-z0-9]+-[A-Za-z0-9]+|[A-Za-z0-9]+).)+([A-Za-z]+)[/?:]?."
      );
      // var reg = /^\b(((https?|ftp):\/\/)?[-a-z0-9]+(\.[-a-z0-9]+)*\.(?:com|edu|gov|int|mil|net|org|biz|info|name|museum|asia|coop|aero|[a-z][a-z]|((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]\d)|\d))\b(\/[-a-z0-9_:\@&?=+,.!\/~%\$]*)?)$/
      // var reg = /^(https?:\/\/)?-((\w+)+(\.\w+)*)-((\.[a-z]+)*)-((\/\w+)*)-(\?\w+\=([\w\u4e00-\u9fa5!@#\$%\^&\*\(\)_\+]+)(&\w+\=([\w\u4e00-\u9fa5!@#\$%\^&\*\(\)_\+]+))*)?-(#\w+)?$/
      if (!reg.test(str)) {
        return false;
      } else {
        return true;
      }
    },
    //跳转发送的链接
    goUrl(url) {
      window.open(url, "_blank");
    },
    //选中活动目录单元
    choseDy(id, obj) {
      if (this.mulutapValue == id) {
        this.mulutapValue = "";
      } else {
        this.mulutapValue = id;
      }
      console.log(obj);
      // if(obj)
    },
    //点击学习章节活动
    syudyJie(id, videos_id, is_sf, expect_up_time) {
      console.log(id, videos_id, is_sf, expect_up_time);
      this.expect_up_time = expect_up_time;
      // clearInterval(this.jieSeekTime);
      // this.jieSeekTime = null;
      // this.zhangjie_id = id;
      if ((this.gm_status == 0 && is_sf == 0) || this.gm_status == 1) {
        this.videos_id = videos_id;
        info_videos({
          md5key: localStorage.getItem("md5key"),
          id: videos_id,
        }).then((res) => {
          console.log(res);
          const data = res.retRes;
          this.file_url = data.fm_file_url;
          this.video_file_url = res.retRes.video_file_url;
          this.seek = res.retRes.times;
          const that = this;
          setTimeout(() => {
            this.$refs.livePlayer.setCurrentTime(this.seek);
          }, 200);
          this.jieSeekTime = setInterval(() => {
            playtimes_activity({
              md5key: localStorage.getItem("md5key"),
              id: this.active_id,
              times: that.$refs.livePlayer.getCurrentTime(),
            });
          }, 60000);
        });
      } else {
        this.dialogVisible1 = true;
      }
    },
    //前往订阅
    goDy() {
      this.$router.push({
        name: "Dingzhi",
        query: {
          kemu_id: this.kemu_id,
        },
      });
    },
    //回到上一页
    goBack() {
      this.$router.push({
        name: "ActiveDetails",
        query: {
          id: this.active_id,
          seek: this.$refs.livePlayer
            ? this.$refs.livePlayer.getCurrentTime()
            : "",
        },
      });
    },
    //自动播放
    click1() {
      this.$refs.livePlayer.play();
      // console.log("进入页面点击");
    },
    // 开启（初始化websocket）
    initWebSocket() {
      setTimeout(() => {
        if (typeof WebSocket === "undefined") {
          alert("您的浏览器不支持socket");
        } else if (this.zb_status && (this.zb_status != 3 || this.hklt_status == 1)) {
          (this.path = this.chat_url),
            // 实例化socket
            (this.socket = new WebSocket(this.path));
          // 监听socket连接
          this.socket.onopen = this.open;
          // 监听socket错误信息
          this.socket.onerror = this.error;
          // 监听socket消息
          this.socket.onmessage = this.message;
          //监听socket断开连接消息
          this.socket.onclose = this.close;
          // console.log(this.online_limit);
        }
      }, 200);
    },
    //建立连接
    open() {
      // console.log(this.socket);
      const data_arr = {
        chat_id: this.chat_id,
        type: "init",
        from_id: this.userId,
        title: this.mynickname,
        file_url: this.mytxFile,
      };
      const msg_data = {
        value: "登录成功，连接到聊天室",
        mytxFile: this.mytxFile,
        is_gly: this.is_gly,
      };
      data_arr["msg_json"] = JSON.stringify(msg_data);
      const data_str = JSON.stringify(data_arr);
      // // 连接建立之后执行send方法发送数据
      this.socket.send(data_str);
      // console.log("socket连接成功--websocketOpen");
    },
    isonline() {
      if (socket) {
        if (socket.readyState == WebSocket.OPEN) {
          return true;
        }
      }
      // console.log(socket.readyState);
      return false;
    },
    //连接失败
    error() {
      // console.log("连接错误--websocketError");
      this.initWebSocket(); //失败后重新连接
    },
    //关闭连接
    close() {
      console.log("socket已经关闭--websocketClose");
    },
    //接受信息
    message(res) {
      // console.log(res, "接收到的");
      const data_info = eval("(" + res.data + ")");
      // console.log(data_info, "接收到的")
      // console.log(data_info.data[0].msg_json)
      const nowTime = Date.parse(new Date());
      // console.log(nowTime)
      switch (data_info["message_type"]) {
        // 登录
        case "init":
          // console.log("欢迎进入直播间");
          break;
        // 检测聊天数据
        case "chatMessage":
          // console.log(this.zb_status,"jajajaj")
          // if(this.)
          data_info.data.forEach(item=>{
            console.log(nowTime/1000 - item.create_time)
            if( JSON.parse(item.msg_json).type == "yuyue" && nowTime/1000 - item.create_time < 60){
              // this.info.push(item)
            }else{
              this.info.push(item)
            }
          })
          // console.log(this.info)
          // this.info = this.info.concat(data_info.data);
          if (this.info.length == 0) {
            this.historyShow = false;
          }
          console.log(this.info, "消息列表123123");
          for (let x = 0; x < this.info.length; x++) {
            if (
              this.info[x].type === "init" &&
              nowTime / 1000 - this.info[x].create_time > 15
            ) {
              this.info.splice(x, 1);
              x--;
            }
          }
          this.evmTimer = setInterval(() => {
            let nowtime1 = Date.parse(new Date());
            for (let x = 0; x < this.info.length; x++) {
              if (
                this.info[x].type === "init" &&
                nowtime1 / 1000 - this.info[x].create_time > 8
              ) {
                console.log(x);
                // console.log(this.info[x].type,nowTime / 1000 -this.info[x].create_time)
                this.info.splice(x, 1);
                x--;
              }
            }
          }, 1000);
          this.info = unique(this.info, "id");
          // console.log(this.info, "最新消息列表");
          //每接收一条消息就更新聊天室位置到最底部
          this.$nextTick(() => {
            var contentHeight = document.getElementsByClassName("xxLists")[0];
            contentHeight.scrollTop = contentHeight.scrollHeight;
          });
          //禁言或拉黑或禁言整个直播间后，所有人的发送按钮和当前禁言拉黑数据改变情况
          // console.log(this.info[this.info.length - 1], "消息列表最新的消息");
          const newMessage = this.info[this.info.length - 1];

          if (
            newMessage.type == "jy" &&
            JSON.parse(newMessage.msg_json).jy_status == 1 &&
            this.userId == JSON.parse(newMessage.msg_json).account_id
          ) {
            this.jy_status_my = 1;
          } else if (
            newMessage.type == "jy" &&
            JSON.parse(newMessage.msg_json).jy_status == 0 &&
            this.userId == JSON.parse(newMessage.msg_json).account_id
          ) {
            // this.canSend = true;
            this.jy_status_my = 0;
          } else if (
            newMessage.type == "lh" &&
            JSON.parse(newMessage.msg_json).lh_status == 0 &&
            this.userId == JSON.parse(newMessage.msg_json).account_id
          ) {
            // this.canSend = true;
            this.isLh = false;
            this.lh_status_my = 0;
          } else if (
            newMessage.type == "lh" &&
            JSON.parse(newMessage.msg_json).lh_status == 1 &&
            this.userId == JSON.parse(newMessage.msg_json).account_id
          ) {
            // this.canSend = false;
            this.isLh = true;
            this.lh_status_my = 1;
          } else if (
            newMessage.type == "jyall" &&
            JSON.parse(newMessage.msg_json).jy_status == 1 &&
            this.is_gly != 1
          ) {
            // this.canSend = false;
            this.jyFlag = true;
            this.jy_status = 1;
          } else if (
            newMessage.type == "jyall" &&
            JSON.parse(newMessage.msg_json).jy_status == 0 &&
            this.is_gly != 1
          ) {
            this.jyFlag = false;
            // this.canSend = true;
            this.jy_status = 0;
          } else if (
            newMessage.type == "jyall" &&
            JSON.parse(newMessage.msg_json).jy_status == 1 &&
            this.is_gly == 1
          ) {
            // this.canSend = false;
            this.jyFlag = true;
            this.jy_status = 1;
          } else if (
            newMessage.type == "jyall" &&
            JSON.parse(newMessage.msg_json).jy_status == 0 &&
            this.is_gly == 1
          ) {
            this.jyFlag = false;
            // this.canSend = true;
            this.jy_status = 0;
          } else if (newMessage.type == "delmsg") {
            console.log("删除了一条消息", JSON.parse(newMessage.msg_json).ids);
            this.info = this.info.filter(
              (item) => item.id != JSON.parse(newMessage.msg_json).ids
            );
          }
          // console.log(
          //   this.userId,
          //   "我的id",
          //   this.jy_status,
          //   "聊天室",
          //   this.jy_status_my,
          //   "禁言",
          //   this.lh_status_my,
          //   "拉黑"
          // );
          //根据接收到消息后判断当前改变后的禁言拉黑等状态，来判断非管理员用户当前是否可以发送消息
          if (this.is_gly == 0 && this.msgsh_status == 0) {
            //不是管理员，不审核信息
            // glcz.style.height = "83.5%";
            if (
              this.jy_status_my == 1 ||
              this.lh_status_my == 1 ||
              this.jy_status == 1
            ) {
              //被禁言或被拉黑或聊天室禁言
              this.canSend = false; //发送按钮置灰，不可发送，弹框提示拉黑禁言
            } else if (
              this.jy_status_my == 0 &&
              this.lh_status_my == 0 &&
              this.jy_status == 0
            ) {
              //没禁言也没拉黑聊天室也没禁言
              this.canSend = true; //正常发，不审核
            }
          } else if (this.is_gly == 0 && this.msgsh_status == 1) {
            //不是管理员，开始审核消息
            // glcz.style.height = "79.2%";
            if (this.jy_status_my == 1 || this.lh_status_my == 1) {
              //被禁言或被拉黑
              this.canSend = false; //发送按钮置灰，不可发送，弹框提示拉黑禁言
            } else if (this.jy_status_my == 0 && this.lh_status_my == 0) {
              //没禁言也没拉黑
              this.canSend = true; //正常发，需审核弹窗
            }
          } else if (this.is_gly == 1 && this.msgsh_status == 0) {
            //身份管理员，审核不受影响
            // glcz.style.height = "75%";
            this.canSend = true;
          } else if (this.is_gly == 1 && this.msgsh_status == 1) {
            //身份管理员，审核不受影响
            // glcz.style.height = "71.5%";
            this.canSend = true;
          }
          break;
        // 用户退出 更新用户列表
        case "logout":
          break;
      }
    },
    //加载更多消息
    getmoreMessage() {
      const getmoreHight = document.getElementsByClassName("xxLists")[0];
      // console.log(getmoreHight.offsetTop,"11111111")
      this.page++;
      console.log(this.page);
      chatmsglists({
        md5key: localStorage.getItem("md5key"),
        chat_id: this.chat_id,
        page: this.page,
        page_size: this.page_size,
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res, "评论列表");
          const historyList = res.retRes;
          historyList.reverse();
          if (res.retRes.length < 50) {
            this.historyShow = false;
          } else if (res.retRes.length >= 50 && this.zb_status == 2) {
            this.historyShow = true;
          }
          this.info = [...res.retRes, ...this.info];
          setTimeout(() => {
            const messageLists = document.querySelectorAll(".xiaoxiLists");
            document.getElementsByClassName("xxLists")[0].scrollTop =
              messageLists[res.retRes.length].offsetTop - 100;
          }, 200);
        }
      });
    },
    //输入限制
    shuru(e) {
      if (this.value.length >= 200) {
        this.$message({
          message: "单词发言不能超过200字",
          type: "warning",
          duration: 1000,
          offset: 300,
        });
      }
    },
    //可以发送消息的发送按钮
    sendMsg() {
      const data_arr = {
        chat_id: this.chat_id,
        type: "sendMessage",
        from_id: this.userId,
        title: this.mynickname,
        file_url: this.mytxFile,
      };
      const msg_data = {
        type: "text",
        contents: this.value,
        is_gly: this.is_gly,
        create_time: parseInt(new Date().getTime()),
      };
      data_arr["msg_json"] = JSON.stringify(msg_data);
      const data_str = JSON.stringify(data_arr);
      // console.log(data_str)
      if (this.value.trim() != "") {
        this.socket.send(data_str);
        this.value = "";
        if (this.msgsh_status == 1 && this.is_gly == 0) {
          this.$message({
            message: "直播间已开启评论审核，请耐心等待！",
            type: "warning",
            duration: 1000,
            offset: 300,
          });
        }
      } else {
        this.$notify.closeAll();
        this.$notify({
          message: "请勿发送空消息",
          duration: 2000,
        });
      }
    },
    //禁止发送消息的发送按钮
    NosendMsg() {
      // console.log(this.jy_status_my, this.lh_status_my);
      if (this.bm_status == 0) {
        this.$message({
          message: "预约活动后，才可以发送消息！",
          type: "warning",
          duration: 1000,
          offset: 300,
        });
      } else if (this.lh_status_my == 1) {
        this.$message({
          message: "您已被管理员拉黑，无法发送消息",
          type: "warning",
          duration: 1000,
          offset: 300,
        });
      } else if (this.jy_status == 1) {
        this.$message({
          message: "当前直播间已经被禁言，无法发送消息",
          type: "warning",
          duration: 1000,
          offset: 300,
        });
      } else if (this.jy_status_my == 1) {
        this.$message({
          message: "您已被管理员禁言，无法发送消息",
          type: "warning",
          duration: 1000,
          offset: 300,
        });
      }
    },
    //点击播放
    startvideo() {
      // console.log(this.$refs.startvideo);
      this.$refs.startvideo.play();
      this.playFlag = false;
    },
    //关闭提示
    closeNotice() {
      const closeNotice = document.getElementsByClassName("notice")[0];
      closeNotice.style.display = "none";
    },
    //选择聊天室
    choseChat() {
      this.rightFlag = 1;
    },
    //选择参考图书
    choseProduct() {
      this.rightFlag = 2;
    },
    //选择教学服务包
    choseFwb() {
      this.rightFlag = 4;
    },
    //全员静言
    jyAll() {
      if (this.jyFlag == false) {
        const data_arr = {
          chat_id: this.chat_id,
          type: "jyall",
          from_id: this.userId,
          title: this.mynickname,
          file_url: this.mytxFile,
        };
        const msg_data = {
          jy_status: 1,
          contents: "全员禁言",
          is_gly: this.is_gly,
        };
        data_arr["msg_json"] = JSON.stringify(msg_data);
        const data_str = JSON.stringify(data_arr);
        this.socket.send(data_str);
        this.jyFlag = true;
      } else if (this.jyFlag == true) {
        const data_arr = {
          chat_id: this.chat_id,
          type: "jyall",
          from_id: this.userId,
          title: this.mynickname,
          file_url: this.mytxFile,
        };
        const msg_data = {
          jy_status: 0,
          contents: "取消禁言",
        };
        data_arr["msg_json"] = JSON.stringify(msg_data);
        const data_str = JSON.stringify(data_arr);
        this.socket.send(data_str);
        this.jyFlag = false;
      }
    },
    //前往用户管理
    goLiveManage() {
      this.$router.push({
        name: "LiveManage",
        query: {
          active_id: this.active_id,
          type: 1,
        },
      });
    },
    //前往评论审核
    goPlsh() {
      this.$router.push({
        name: "LiveManage",
        query: {
          active_id: this.active_id,
          type: 2,
        },
      });
    },
    //发图片
    zh_uploadFile() {
      this.$refs.evfile.click();
    },
    zh_uploadFile_change(evfile) {
      console.log(evfile, "xuanzhede wenjian ");
      //file是选择的文件对象
      return new Promise((resolve, reject) => {
        qiniuconfig({
          md5key: localStorage.getItem("md5key"),
        }).then((res) => {
          //获取后台返的token  和域名
          this.baseurl = res.retRes.file_base;
          this.upload_path = res.retRes.upload_path;
          let uptoken = res.retRes.qiniu_token;
          let file = evfile.target.files[0];
          let key =
            this.upload_path +
            timeStamp2String(new Date().getTime(), 12) +
            "/" +
            new Date().getTime() +
            Math.floor(Math.random() * 1000) +
            file.name.substring(file.name.lastIndexOf("."), file.name.length); //这是上船后返回的文件名，这里为了避免重复，加上了时间戳和随机数
          var config = {
            useCdnDomain: true, //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
            // region: qiniu.region.z0, //选择上传域名区域；当为 null 或 undefined 时，自动分析上传域名区域。
            domain: "https://static.idianjiao.com", //配置好的七牛云域名
            chunkSize: 100, //每个分片的大小，单位mb，默认值3
            forceDirect: true, //直传还是断点续传方式，true为直传
          };
          var putExtra = {
            fname: file.name, //文件原始文件名
            params: {},
            mimeType: [] || null,
          };
          var observable = qiniu.upload(file, key, uptoken, putExtra, config);
          observable.subscribe({
            next: (result) => {
              //主要用来展示进度
            },
            error: (err) => {
              //上传错误后触发
              console.log(err);
              reject(err);
            },
            complete: (result) => {
              //上传成功后触发。包含文件地址。
              console.log(result);
              // console.log(this.baseurl + "/" + result.key);
              // this.file_url = this.baseurl + "/" + result.key;
              this.kj_download_file_url = this.baseurl + "/" + result.key;
              resolve(result);
              console.log(this.kj_download_file_url);
              const data_arr = {
                chat_id: this.chat_id,
                type: "sendMessage",
                from_id: this.userId,
                title: this.mynickname,
                file_url: this.mytxFile,
              };
              const msg_data = {
                type: "image",
                contents: "image",
                picUrl: this.kj_download_file_url,
                create_time: parseInt(new Date().getTime()),
                is_gly: this.is_gly,
              };
              data_arr["msg_json"] = JSON.stringify(msg_data);
              const data_str = JSON.stringify(data_arr);
              this.socket.send(data_str);
              this.kj_download_file_url = "";
            },
          });
          evfile.target.value = ''
        });
        
      });
    },
    //同步播放进度
    getBfJd(e) {
      // console.log(123);
    },
    //前往样书详情
    goProDetails() {
      // console.log(this.product_info.id)
      this.$router.push({
        name: "ProductDetails",
        query: {
          id: this.product_info.id,
        },
      });
    },
    //按钮点击颜色展示状态
    changeColor() {
      document.querySelectorAll("#yyanniu")[0].style.opacity = "0.6";
    },
    huifuColor() {
      document.querySelectorAll("#yyanniu")[0].style.opacity = "1";
    },
   
  },
};
</script>
<style>
/* 面包屑 */
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link:hover {
  color: #08a579;
}
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
  font-weight: normal;
  color: #626366;
}
.el-breadcrumb__separator {
  color: #626366;
}
:root {
  --muluLists-width: 518px;
  --muluLists-height: 120px;
}
</style>
<style lang="less" scoped>
#container {
  // background-color: #ccc;
  .top {
    margin-left: 80px;
    margin: 0 auto;
    width: 1200px;
    .bread {
      display: flex;
      padding: 16px 0;
      font-size: 14px;
      font-family: Microsoft YaHei;
      // font-weight: 400;
      color: #626366;
      line-height: 24px;
      .el-breadcrumb {
        font-size: 14px;
        line-height: 24px;
        /deep/.el-breadcrumb__item:last-child {
          .el-breadcrumb__inner {
            color: #08a579;
          }
        }
        /deep/.el-breadcrumb__inner.is-link {
          font-weight: normal;
        }
      }
    }
  }
  .activeTop {
    position: relative;
    display: flex;
    margin: 0 auto;
    margin-bottom: 22px;
    width: 1200px;
    border-radius: 10px;
    overflow: hidden;
    .videoBox {
      position: relative;
      margin-right: 20px;
      width: 895px;
      height: 504px;
      cursor: pointer;
      overflow: hidden;
      border-radius: 20px;
      video {
        object-fit: fill;
        width: 100%;
        height: 100% !important;
      }
      /deep/.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
        z-index: 2 !important;
      }
      /deep/.video-js .vjs-big-play-button {
        z-index: 2;
      }
      .btZz {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100px;
        .zzTop {
          height: 100px;
          background-color: #08a579d9;
          h3 {
            margin-left: 48px;
            font-size: 24px;
            color: #fff;
            line-height: 100px;
          }
        }
      }
      .zhezhao {
        position: absolute;
        top: -41px;
        left: 0;
        width: 100%;
        height: 100%;
        background: #0000007a;
        .zzTop {
          position: relative;
          top: 42px;
          height: 100px;
          background-color: #08a579d9;
          h3 {
            margin-left: 48px;
            font-size: 24px;
            color: #fff;
            line-height: 100px;
          }
        }
        .zzBottom {
          position: relative;
          background-color: #0000006b;
          height: 404px;
          span {
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            display: inline-block;
            color: #fff;
            width: 136px;
            height: 48px;
            background: #999999;
            border-radius: 24px;
            text-align: center;
            line-height: 48px;
            opacity: 1;
          }
        }
      }
    }

    .lhUser {
      position: relative;
      background-color: #000;
      background: rgb(0, 0, 0, 50%);
      color: #fff;
      font-size: 16px;
      text-align: center;
      overflow: hidden;
      .zhezhao {
        position: relative;
        position: absolute;
        top: 0;
        width: 600px;
        height: 338px;
        border-radius: 10px;
        overflow: hidden;
        .block {
          width: 600px;
          height: 338px;
          background: #000000;
          opacity: 0.4;
          border-radius: 10px;
        }
        img {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translateY(-50%) translateX(-50%);
          width: 58px;
          height: 58px;
          cursor: pointer;
          object-fit: contain;
        }
      }
      .videoBg {
        position: relative;
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translateX(-50%);
        p {
          position: absolute;
          top: 18%;
          left: 10%;
          font-size: 16px;

          i {
            position: relative;
            top: 4px;
            left: -10px;
            font-size: 24px;
            font-weight: 100;
          }
        }
      }
    }
    .right {
      width: 290px;
      .daojishi {
        margin-bottom: 20px;
        height: 175px;
        background: #fff;
        border-radius: 20px;
        overflow: hidden;
        h5 {
          margin: 28px 0 10px 28px;
          font-size: 14px;
          color: #07a579;
        }
        p {
          margin-left: 28px;
          font-size: 16px;
          font-weight: bold;
          color: #07a579;
          span {
            font-size: 14px;
            font-weight: bold;
            color: #656565;
          }
        }
        .anniu {
          margin-top: 20px;
          width: 290px;
          height: 80px;
          background: #f2faf8;
          border-radius: 20px;
          cursor: pointer;
          span {
            margin-top: 20px;
            margin-left: 30px;
            display: inline-block;
            text-align: center;
            line-height: 40px;
            font-size: 18px;
            color: #fff;
            width: 224px;
            height: 40px;
            background: #07a579;
            border-radius: 20px;
            opacity: 1;
          }
          span:active {
            opacity: 0.8;
          }
        }
      }
      .teacherMsg {
        height: 308px;
        background-color: #fff;
        border-radius: 20px;
        overflow: hidden;
        h5 {
          margin: 28px 0 20px 28px;
          font-size: 14px;
          color: #07a579;
        }
        .tec {
          display: flex;
          margin-left: 28px;
          .pic {
            margin-right: 22px;
            width: 80px;
            height: 80px;
            border-radius: 100%;
            img {
              width: 100%;
              max-height: 100%;
              border-radius: 100%;
              object-fit: contain;
            }
          }
          .msg {
            display: flex;
            flex-direction: column;
            h4 {
              margin-bottom: 10px;
              font-size: 16px;
              color: #333;
            }
            p {
              font-size: 14px;
              color: #333;
            }
          }
        }
        .jieshao {
          p {
            margin: 0 auto;
            padding-top: 18px;
            margin-top: 20px;
            line-height: 24px;
            width: 224px;
            font-size: 14px;
            color: #656565;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 4; // 控制多行的行数
            -webkit-box-orient: vertical;
            border-top: 1px solid #eff1f5;
          }
        }
      }
    }
  }
  .ptAc {
    width: 100%;
    // height: 797px;
    overflow: hidden;
    .Box {
      display: flex;
      justify-content: space-between;
      margin: 0 auto;
      width: 1200px;
      height: 0px;
      .left {
        position: relative;
        margin-right: 20px;
        width: 70%;
        height: 100%;
        .videoBox {
          position: relative;
          width: 100%;
          height: 100%;
          overflow: hidden;
          border-radius: 20px;
          video {
            object-fit: fill;
            width: 100%;
            height: 100% !important;
            overflow: hidden;
          }
          /deep/.vjs-has-started.vjs-user-inactive.vjs-playing
            .vjs-control-bar {
            z-index: 2 !important;
          }
          /deep/.video-js .vjs-big-play-button {
            z-index: 2;
          }

          .personalNum {
            position: absolute;
            top: 16px;
            right: 20px;
            padding: 2px 10px;
            background: #ffffff2b;
            border-radius: 10px;
            p {
              color: #fff;
              font-size: 12px;
            }
          }
          .btZz {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100px;
            .zzTop {
              height: 100px;
              background-color: #08a579d9;
              h3 {
                margin-left: 48px;
                font-size: 24px;
                color: #fff;
                line-height: 100px;
              }
            }
          }
          .zhezhao {
            position: absolute;
            top: -41px;
            left: 0;
            width: 100%;
            height: 100%;
            background: #0000007a;
            .zzTop {
              position: relative;
              top: 42px;
              height: 100px;
              background-color: #08a579d9;
              h3 {
                margin-left: 48px;
                font-size: 24px;
                color: #fff;
                line-height: 100px;
              }
            }
            .zzBottom {
              position: relative;
              background-color: #0000006b;
              height: 404px;
              span {
                position: absolute;
                top: 40%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
                display: inline-block;
                color: #fff;
                width: 136px;
                height: 48px;
                background: #999999;
                border-radius: 24px;
                text-align: center;
                line-height: 48px;
                opacity: 1;
              }
            }
          }
        }
        .videoBox:hover {
          span {
            img {
              width: 80px;
              height: 80px;
              object-fit: contain;
            }
          }
        }
        .lhUser {
          position: relative;
          background-color: #000;
          background: rgb(0, 0, 0, 50%);
          color: #fff;
          font-size: 16px;
          text-align: center;
          .zhezhao {
            position: relative;
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            border-radius: 10px;
            .block {
              width: 100%;
              height: 100%;
              background: #000000;
              opacity: 0.4;
              border-radius: 10px;
            }
            img {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translateY(-50%) translateX(-50%);
              width: 58px;
              height: 58px;
              cursor: pointer;
            }
          }
          .videoBg {
            position: relative;
            position: absolute;
            top: 60%;
            left: 50%;
            transform: translateX(-50%);
            p {
              position: absolute;
              top: 18%;
              left: 10%;
              font-size: 16px;

              i {
                position: relative;
                top: 4px;
                left: -10px;
                font-size: 24px;
                font-weight: 100;
              }
            }
          }
        }
        .shikan {
          display: flex;
          justify-content: space-between;
          position: absolute;
          bottom: 54px;
          left: 30px;
          display: flex;
          align-items: center;
          width: 403px;
          height: 54px;
          background: #0000008a;
          border-radius: 27px;
          z-index: 2;
          .text {
            margin-right: 0;
            margin-left: 30px;
            line-height: 54px;
            h3 {
              color: #fff;
              font-size: 18px;
            }
          }
          .godingyue {
            margin-right: 20px;
            margin-left: 10px;
            width: 102px;
            height: 38px;
            background: linear-gradient(270deg, #FDE7BD, #ECBB82);
            border-radius: 19px;
            font-size: 18px;
            color: #7f3f18;
            line-height: 38px;
            text-align: center;
            font-weight: bold;
            cursor: pointer;
            user-select: none;
          }
          .godingyue:active {
            opacity: 0.8;
          }
        }
        .tcgg {
          position: relative;
          display: flex;
          position: absolute;
          right: 10px;
          bottom: 60px;
          background: #fff;
          border-radius: 8px;
          .tcleft {
            img {
              margin: 10px;
              width: 100px;
              height: 100px;
            }
          }
          .tcright {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            margin-right: 28px;
            h5 {
              margin-bottom: 10px;
              color: #333;
              font-size: 14px;
              width: 100px;
            }
            span {
              display: inline-block;
              text-align: center;
              line-height: 32px;
              color: #fff;
              font-size: 14px;
              width: 100px;
              height: 32px;
              background: #f25555;
              border-radius: 16px;
              cursor: pointer;
              user-select: none;
            }
          }
          .closegg {
            position: absolute;
            top: 5px;
            right: 5px;
            font-size: 20px;
            line-height: 16px;
            color: #f25555;
            font-weight: bold;
            cursor: pointer;
            user-select: none;
          }
        }
      }

      .right {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 28%;
        height: 100%;
        background-color: #2d2d2d;
        .taps {
          height: 8%;
          display: flex;
          align-items: center;
          background-color: #333;
          .tap {
            flex: 1;
            position: relative;
            display: flex;
            flex-direction: column;
            // justify-content: space-between;
            align-items: center;
            height: 100%;
            text-align: center;
            color: #fff;
            font-size: 14px;
            cursor: pointer;
            user-select: none;
            h3 {
              transform: translateY(50%);
              font-weight: normal;
            }
            span {
              position: absolute;
              bottom: 0;
              // justify-self: flex-start;
              display: inline-block;
              width: 100px;
              height: 3px;
            }
          }
          .choseTap {
            span {
              background: #00a678;
            }
          }
        }
        .notice {
          display: flex;
          justify-content: space-between;
          align-items: center;
          position: absolute;
          top: 8%;
          left: 0;
          width: 100%;
          height: 24px;
          line-height: 24px;
          background: #f7e2e3;
          // opacity: 0.8;
          color: #f84340;
          overflow: hidden;
          .noticeMsg {
            width: 90%;
            overflow: hidden;
            p {
              display: inline-block;
              margin-left: 5px;
              transform: translateX(100%);
              font-size: 12px;
              // margin-left: 80px; // 把文字弄出可见区域
              // width: 90%;
              animation: myMove 4s linear infinite; // 重点，定义动画
              animation-fill-mode: forwards;
            }
          }
          i {
            margin-right: 10px;
            cursor: pointer;
          }
          // /*文字无缝滚动*/
          @keyframes myMove {
            0% {
              transform: translateX(120px);
            }
            100% {
              transform: translateX(-20px);
            }
          }
        }

        .tab1 {
          height: 75%;
          .xxLists {
            position: relative;
            height: 100%;
            overflow: hidden;
            overflow-y: scroll;
            -ms-overflow-style: none; /* IE 10+ */
            scrollbar-width: none; /* Firefox */
            .getmoremessage {
              margin: 20px;
              text-align: center;
              color: #08a579;
              cursor: pointer;
            }
            .xiaoxiLists {
              .leftXx {
                display: flex;
                flex-direction: column;
                .userInfo {
                  display: flex;
                  align-items: center;
                  margin-left: 20px;
                  margin-top: 10px;
                  img {
                    margin-right: 5px;
                    width: 36px;
                    height: 36px;
                    border-radius: 50%;
                  }
                  h4 {
                    margin-right: 3px;
                    font-size: 14px;
                    color: #0086ff;
                  }
                  h3 {
                    display: inline-block;
                    margin-right: 5px;
                    text-align: center;
                    line-height: 20px;
                    font-size: 12px;
                    font-weight: normal;
                    width: 58px;
                    height: 20px;
                    color: #fff;
                    background: #0086ff;
                    border-radius: 4px;
                  }
                  p {
                    font-size: 14px;
                    color: #fff;
                  }
                }
                .msgInfo {
                  margin: 0px 11% 0px 15%;

                  width: auto;
                  color: #fff;
                  line-height: 20px;
                  /deep/.el-image {
                    max-width: 250px;
                    // max-height: 300px;
                    object-fit: cover;
                  }
                  span {
                    display: inline-block;
                    padding: 10px;
                    margin-top: 10px;
                    margin-bottom: 10px;
                    font-size: 14px;
                    background-color: #454545;
                    border-radius: 4px;
                    word-break: break-all;
                  }
                  .urlMsg {
                    cursor: pointer;
                  }
                  .urlMsg:hover {
                    text-decoration: underline;
                    color: #08a579;
                  }
                  .yuyueContents{
                    display: flex;
                    background: #fff;
                    border-radius: 8px;
                    padding: 4%;
                    .tcleft {
                      margin-right: 4%;
                      img {
                        width: 100px;
                        height: 100px;
                      }
                    }
                    .tcright {
                      display: flex;
                      flex-direction: column;
                      justify-content: space-around;
                      width: 100%;
                      h5 {
                        margin-bottom: 4%;
                        color: #333;
                        font-size: 14px;
                        width: 100%;
                      }
                      span {
                        display: inline-block;
                        text-align: center;
                        line-height: 74%;
                        color: #fff;
                        font-size: 14px;
                        width: 50%;
                        height: 10%;
                        background: #f25555;
                        border-radius: 16px;
                        cursor: pointer;
                        user-select: none;
                      }
                    }
                  }
                }
              }
              .centerXx {
                text-align: center;
                .jyall,
                .jy,
                .lh {
                  text-align: center;
                  line-height: 40px;
                }
              }
              .rightXx {
                display: flex;
                flex-direction: column;
                text-align: left;
                .userInfo {
                  display: flex;
                  justify-content: flex-strat;
                  align-items: center;
                  margin-left: 20px;
                  margin-top: 10px;
                  img {
                    margin-right: 5px;
                    // margin-left: 10px;
                    width: 36px;
                    height: 36px;
                    border-radius: 50%;
                  }
                  h4 {
                    margin-right: 3px;
                    font-size: 14px;
                    color: #0086ff;
                  }
                  h3 {
                    display: inline-block;
                    margin-right: 5px;
                    text-align: center;
                    line-height: 20px;
                    font-size: 12px;
                    font-weight: normal;
                    width: 58px;
                    height: 20px;
                    color: #fff;
                    background: #0086ff;
                    border-radius: 4px;
                  }
                  p {
                    font-size: 14px;
                    color: #fff;
                  }
                }
                .msgInfo {
                  // margin: 10px 15% 10px 11%;
                  margin: 10px 11% 10px 15%;
                  width: auto;
                  color: #fff;
                  line-height: 20px;
                  /deep/.el-image {
                    max-width: 250px;
                    max-height: 300px;
                    object-fit: cover;
                  }
                  span {
                    display: inline-block;
                    padding: 10px;
                    font-size: 14px;
                    background-color: #454545;
                    border-radius: 4px;
                    word-break: break-all;
                  }
                  .urlMsg {
                    cursor: pointer;
                  }
                  .urlMsg:hover {
                    text-decoration: underline;
                    color: #08a579;
                  }
                }
              }
            }
          }
          ::-webkit-scrollbar {
            display: none; /* Chrome Safari */
          }
          .shenhe {
            p {
              text-align: center;
              line-height: 20px;
            }
          }
          .shuru {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 10%;
            background: #454545;
            /deep/.el-input--small {
              width: 80%;
            }
            /deep/.el-input--small .el-input__inner {
              padding: 0;
              padding-left: 10px;
              margin-left: 15px;
              width: 90%;
              min-width: 100px;
              height: 28px;
              background: #333333;
              border-radius: 4px;
              outline: none;
              color: #fff;
              border: 0;
            }
            span {
              display: inline-block;
              margin-right: 6%;
              width: 64px;
              height: 28px;
              background: #00a678;
              border-radius: 14px;
              text-align: center;
              font-size: 14px;
              color: #ffffff;
              line-height: 28px;
              cursor: pointer;
            }
          }
          .doSome {
            display: flex;
            height: 12%;
            background: #2d2d2d;
            .doBox {
              display: flex;
              justify-content: center;
              align-items: center;
              text-align: center;
              width: 25%;
              height: 100%;
              font-size: 14px;
              color: #666666;
              cursor: pointer;
              i {
                position: relative;
                top: 1px;
              }
              h3 {
                font-size: 12px;
              }
            }
            .sendPic {
              border-right: 1px solid #4d4d4d;
            }
            .userGl {
              border-right: 1px solid #4d4d4d;
            }
            .alljy {
              border-right: 1px solid #4d4d4d;
            }
          }
        }
        .tab2 {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          text-align: center;
          height: 92%;
          user-select: none;
          .bookContents {
            height: 76.1%;
            overflow-y: scroll;
            background: #fff;
            /deep/p {
              text-align: center;
              font-size: 12px;
            }
            /deep/img {
              max-width: 100% !important;
              height: auto !important;
              margin-bottom: -3px !important;
            }
          }
          ::-webkit-scrollbar {
            width: 0px;
          }
          ::-webkit-scrollbar-track {
            background-color: #000;
            -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
          }
          ::-webkit-scrollbar-thumb {
            background-color: rgba(0, 0, 0, 0.2);
            border-radius: 5px;
          }
          ::-webkit-scrollbar-button {
            background-color: #000;
            display: none;
          }
          ::-webkit-scrollbar-corner {
            background-color: black;
          }
          .ewm {
            display: flex;
            align-items: center;
            height: 24%;
            // margin-top: 10%;
            background: #454545;
            .pic {
              margin: 10px;
              width: 25%;
              height: 80%;
              img {
                width: 100%;
                height: 100%;
                object-fit: contain;
              }
            }
            p {
              margin-left: 10px;
              margin-right: 10px;
              text-align: center;
              color: #ffffff;
              font-size: 14px;
            }
          }
        }
        .nobook {
          .bookContents {
            background-color: #2d2d2d;
            h3 {
              font-size: 20px;
              color: #fff;
              margin-top: 50%;
              font-weight: normal;
            }
          }
        }
        .tab3 {
          height: 92%;
          .danyuan {
            margin-bottom: 20px;
            .mltitle {
              display: flex;
              justify-content: space-between;
              align-items: center;
              // margin-top: 20px;
              height: 60px;
              background: #292e3f;
              cursor: pointer;
              h3 {
                margin-left: 20px;
                font-size: 16px;
                color: #fff;
                line-height: 54px;
              }
              .jiantou {
                img {
                  margin-right: 20px;
                  width: 10px;
                  height: 5px;
                  object-fit: contain;
                }
              }
            }
            .mltitle:last-child {
              margin-top: 0;
            }
            .muluLists {
              position: relative;
              display: flex;
              align-items: center;
              padding: 5px 0;
              background-color: #1d2130;
              .leftTips {
                width: 4px;
                height: 72px;
                background-color: #fc8d2f;
              }
              .muluIndex {
                margin-left: 15px;
                font-size: 20px;
                color: #fff;
              }
              .mulumsg {
                display: flex;
                flex-direction: column;
                margin-left: 20px;
                color: #333;
                .listTitle {
                  margin-bottom: 10px;
                  // width: 330px;
                  color: #fff;
                  font-size: 14px;
                }
                .mulubottom {
                  display: flex;
                  font-size: 12px;
                  color: #fff;
                  .studyjd {
                    margin-left: 20px;
                  }
                }
              }
              .muluright {
                position: absolute;
                right: 20px;
                margin-left: 90px;
                .zhuangtai {
                  display: flex;
                  align-items: center;
                  font-size: 14px;
                  color: #fff;
                  cursor: pointer;
                  img {
                    margin-right: 8px;
                    width: 16px;
                    object-fit: contain;
                  }
                }
              }
            }
            .nowmulu {
              background-color: #08a5791a;
              color: #08a579;
              .mulumsg {
                .listTitle {
                  color: #08a579;
                }
              }
              .mulubottom {
                div {
                  color: #08a579;
                }
              }
              .muluIndex {
                color: #08a579;
              }
              .muluright {
                span {
                  color: #08a579;
                }
              }
            }
            .beforemulu {
              // background-color: #F2FEFB;
              color: #b3b3b3;
              .mulumsg {
                color: #b3b3b3;
              }
              .muluright {
                span {
                  color: #b3b3b3;
                }
              }
            }
          }
        }
        .tab4{
          height: 92%;
          ::-webkit-scrollbar {
            width: 0px;
          }
          ::-webkit-scrollbar-track {
            background-color: #000;
            -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
          }
          ::-webkit-scrollbar-thumb {
            background-color: rgba(0, 0, 0, 0.2);
            border-radius: 5px;
          }
          ::-webkit-scrollbar-button {
            background-color: #000;
            display: none;
          }
          ::-webkit-scrollbar-corner {
            background-color: black;
          }
          .goodLists{
            display: flex;
            flex-direction: column;
            margin: 0 auto;
            width: 90%;
            user-select: none;
            height: 100%;
            overflow-y: scroll;
            
            .goodsBox{
              display: flex;
             align-items: center;
              margin-top: 20px;
              padding-bottom: 20px;
              border-bottom: 1px solid #4D4D4D;
              .pic{
                margin-right: 5%;
                width: 25%;
                // height: 100px;
                img{
                  width: 100%;
                }
              }
              .details{
                position: relative;
                width: 65%;
                // display: flex;
                // flex-direction: column;
                // justify-content: space-between;
                h3{
                  margin-bottom: 4%;
                  font-size: 16px;
                  color: #FFF;
                }
                p{
                  width: 100%;
                  font-size: 12px;
                  color: #999;
                   overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp:2;
                  -webkit-box-orient: vertical;
                }
                span{
                  margin-top: 7%;
                  display: inline-block;
                  width: 45%;
                  height: 32px;
                  line-height: 32px;
                  font-size: 14px;
                  text-align: center;
                  color: #FFF;
                  background: #F25555;
                  border-radius: 16px;
                  cursor: pointer;
                }
                span:active{
                  opacity: .8;
                }
              }
            }
          }
        }
      }
    }
  }
  .jcjxVideo {
    display: flex;
    margin: 0 auto;
    margin-bottom: 22px;
    width: 1200px;
    border-radius: 10px;
    overflow: hidden;
    .videoBox {
      position: relative;
      margin-right: 20px;
      width: 895px;
      height: 504px;
      cursor: pointer;
      overflow: hidden;
      border-radius: 20px;
      video {
        object-fit: fill;
        width: 100%;
        height: 100% !important;
      }
      /deep/.video-js .vjs-big-play-button {
        z-index: 2;
      }
      .btZz {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100px;
        .zzTop {
          height: 100px;
          background-color: #08a579d9;
          h3 {
            margin-left: 48px;
            font-size: 24px;
            color: #fff;
            line-height: 100px;
          }
        }
      }
      .zhezhao {
        position: absolute;
        top: -41px;
        left: 0;
        width: 100%;
        height: 100%;
        background: #0000007a;
        .zzTop {
          position: relative;
          top: 41px;
          height: 100px;
          background-color: #08a579d9;
          h3 {
            margin-left: 48px;
            font-size: 24px;
            color: #fff;
            line-height: 100px;
          }
        }
        .zzBottom {
          position: relative;
          background-color: #0000006b;
          height: 404px;
          span {
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            display: inline-block;
            color: #fff;
            width: 136px;
            height: 48px;
            background: #999999;
            border-radius: 24px;
            text-align: center;
            line-height: 48px;
            opacity: 1;
          }
        }
      }
      .shikan {
        display: flex;
        justify-content: space-between;
        position: absolute;
        bottom: 54px;
        left: 30px;
        display: flex;
        align-items: center;
        width: 403px;
        height: 54px;
        background: #0000008a;
        border-radius: 27px;
        z-index: 2;
        .left {
          margin-left: 30px;
          line-height: 54px;
          h3 {
            color: #fff;
            font-size: 18px;
          }
        }
        span {
          margin-right: 20px;
          margin-left: 10px;
          width: 102px;
          height: 38px;
          background: #ffdd9b;
          border-radius: 19px;
          font-size: 18px;
          color: #7f3f18;
          line-height: 38px;
          text-align: center;
          font-weight: bold;
          cursor: pointer;
          user-select: none;
        }
        span:active {
          opacity: 0.8;
        }
      }
    }
    .vjs-poster {
      background-size: 100% !important;
    }
    .lhUser {
      position: relative;
      background-color: #000;
      background: rgb(0, 0, 0, 50%);
      color: #fff;
      font-size: 16px;
      text-align: center;
      overflow: hidden;
      .zhezhao {
        position: relative;
        position: absolute;
        top: 0;
        width: 600px;
        height: 338px;
        border-radius: 10px;
        overflow: hidden;
        .block {
          width: 600px;
          height: 338px;
          background: #000000;
          opacity: 0.4;
          border-radius: 10px;
        }
        img {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translateY(-50%) translateX(-50%);
          width: 58px;
          height: 58px;
          cursor: pointer;
          object-fit: contain;
        }
      }
      .videoBg {
        position: relative;
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translateX(-50%);
        p {
          position: absolute;
          top: 18%;
          left: 10%;
          font-size: 16px;
          i {
            position: relative;
            top: 4px;
            left: -10px;
            font-size: 24px;
            font-weight: 100;
          }
        }
      }
    }
    .right {
      width: 290px;
      height: 504px;
      background-color: #fff;
      border-radius: 20px;
      overflow: hidden;

      .rightTitle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 30px auto;
        h4 {
          margin-left: 30px;
          font-size: 16px;
          color: #333333;
        }
        span {
          margin-right: 34px;
          font-size: 14px;
          font-weight: bold;
          color: #07a579;
        }
      }
      .zhangjie {
        height: 404px;
        overflow: hidden;
        overflow-y: auto;
        .danyuan {
          h4 {
            margin-left: 32px;
            font-size: 16px;
            color: #333333;
            font-weight: normal;
          }
          .jie {
            display: flex;
            margin: 10px 0;
            padding: 20px 0;
            // background: #E5F7F1;
            .left {
              margin-left: 30px;
              margin-right: 10px;
              cursor: pointer;
              img {
                position: relative;
                top: 4px;
                width: 16px;
                height: 16px;
                object-fit: contain;
              }
            }
            .zj_right {
              p {
                width: 184px;
                font-size: 16px;
                color: #333;
                line-height: 26px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2; // 控制多行的行数
                -webkit-box-orient: vertical;
                cursor: pointer;
              }
              .msg {
                display: flex;
                justify-content: space-between;
                margin-top: 13px;
                font-size: 12px;
                color: #999;
                .shichang {
                  margin-right: 13px;
                }
              }
            }
          }
          .chosejie {
            background: #e5f7f1;
            .zj_right {
              p {
                color: #07a579;
                font-weight: bold;
              }
            }
          }
        }
      }
      ::-webkit-scrollbar {
        width: 2px;
        height: 1px;
        background-color: rgba(0, 0, 0, 0.2);
      }
      ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        background-color: #f5f5f5;
      }
      ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: #b3b3b3;
      }
    }
  }
  .dingzhi {
    margin: 20px auto;
    width: 1200px;
    background-color: #fff;
    border-radius: 20px;
    overflow: hidden;
    .dingzhiTitle {
      display: flex;
      flex-direction: column;
      padding-left: 30px;
      margin-bottom: 30px;
      // align-items: center;
      width: 1170px;
      border-bottom: 1px solid #e5e5e5;
      h4 {
        margin-top: 20px;
        margin-bottom: 12px;
        font-size: 16px;
        color: #07a579;
      }
      span {
        display: inline-block;
        margin-left: 38px;
        width: 32px;
        height: 3px;
        background: #07a579;
      }
    }
    .dingzhiLists {
      display: flex;
      justify-content: space-around;
      margin-bottom: 30px;
      .dingzhiBox {
        // display: flex;
        // flex-direction: column;
        // align-items: center;
        width: 316px;
        height: 193px;
        background-image: url("../../assets/img/activeNew/dingzhiBg1.png");
        background-repeat: no-repeat;
        background-size: 100%;
        .dztop {
          display: flex;
          align-items: center;
          margin-top: 45px;
          margin-left: 35px;
          img {
            width: 60px;
            max-height: 60px;
          }
          h4 {
            margin-left: 20px;
            font-size: 16px;
            color: #333;
          }
        }
        .dzBottom {
          margin-top: 30px;
          margin-left: 114px;
          span {
            display: inline-block;
            width: 96px;
            height: 28px;
            font-size: 14px;
            line-height: 28px;
            text-align: center;
            background: #07a579;
            color: #fff;
            border-radius: 14px;
            cursor: pointer;
            user-select: none;
          }
          span:active {
            opacity: 0.8;
          }
        }
      }
    }
  }
  .teacher {
    margin: 20px auto;
    width: 1200px;
    background-color: #fff;
    border-radius: 20px;
    overflow: hidden;
    h4 {
      margin: 20px 0 16px 30px;
      font-size: 16px;
      color: #07a579;
    }
    .details {
      display: flex;
      align-items: center;
      .left {
        display: flex;
        align-items: center;
        margin-left: 30px;
        padding-right: 28px;
        margin-bottom: 24px;
        border-right: 1px solid #eff1f5;
        .pic {
          margin-right: 22px;
          width: 80px;
          height: 80px;
          border-radius: 100%;
          img {
            width: 100%;
            max-height: 100%;
            border-radius: 100%;
            object-fit: contain;
          }
        }
        .msg {
          display: flex;
          flex-direction: column;
          h4 {
            margin: 0;
            margin-bottom: 10px;
            font-size: 16px;
            color: #333;
          }
          p {
            font-size: 14px;
            color: #333;
          }
        }
      }
      .right {
        margin-bottom: 24px;
        margin-left: 22px;
        max-width: 800px;
        line-height: 24px;
        font-size: 14px;
        color: #656565;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3; // 控制多行的行数
        -webkit-box-orient: vertical;
      }
    }
  }
  .content {
    display: flex;
    justify-content: space-between;
    margin: 20px auto;
    width: 1200px;
    .left {
      width: 900px;
      background: #ffffff;
      border-radius: 10px;
      /deep/.el-tabs {
        margin-top: 20px;
      }
      /deep/.el-tabs__nav-wrap {
        padding-left: 30px;
        border-bottom: 1px solid #ccc;
      }
      /deep/.el-tabs__nav-wrap::after {
        height: 0px;
      }
      /deep/.el-tabs__header {
        margin: 0;
        user-select: none;
      }
      /deep/.el-tabs__item {
        margin: 13px 0;
        line-height: 16px;
        height: 16px;
        border-right: 1px solid #ccc;
        color: #939599;
      }
      /deep/.el-tabs__item:last-child {
        border-right: 0;
      }
      /deep/.el-tabs__active-bar {
        background-color: #08a579;
      }
      /deep/.el-tabs__nav-wrap::after {
        background-color: #fff;
      }
      /deep/.el-tabs__item.is-active {
        color: #333;
        font-weight: 600;
      }

      .tapsHeader {
        display: flex;
        margin-top: 20px;
        margin-left: 10px;
        // width: 100%;
        border-bottom: 1px solid #e6e6e6;
        .taps {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 0 5px;
          width: 80px;
          cursor: pointer;
          user-select: none;
          .tapsTitle {
            margin-bottom: 10px;
            font-size: 14px;
            color: #939599;
          }
          span {
            display: inline-block;
            width: 32px;
            height: 3px;
          }
        }
        .choseTaps {
          .tapsTitle {
            margin-bottom: 10px;
            font-size: 16px;
            color: #333333;
          }
          span {
            background: #08a579;
          }
        }
      }
      .tab1 {
        margin: 20px auto;
        width: 800px;

        font-size: 14px;
        color: #626366;
        line-height: 30px;
        /deep/div {
          display: flex;
          flex-direction: column;
        }
        /deep/img {
          width: 100% !important;
          height: auto !important;
        }
      }
      .tab11 {
        margin: 20px auto;
        width: 740px;
      }
    }
    .right {
      width: 290px;
      overflow: hidden;
      .ac {
        background: #ffffff;
        border-radius: 20px;
        overflow: hidden;
        h3 {
          margin: 30px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          color: #333333;
        }
        .acLists {
          display: flex;
          flex-direction: column;
          .acBox {
            display: flex;
            margin-bottom: 30px;
            cursor: pointer;
            .left {
              margin-left: 20px;
              width: 126px;
              height: 72px;
              img {
                width: 100%;
                max-height: 100%;
                object-fit: contain;
              }
            }
            .acRight {
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              margin-left: 6px;
              width: 112px;
              .title {
                margin-top: 4px;
                font-size: 14px;
                color: #333;
                width: 112px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2; // 控制多行的行数
                -webkit-box-orient: vertical;
              }
              .msg {
                display: flex;
                justify-content: space-between;
                align-items: center;
                p {
                  display: flex;
                  align-items: center;
                  font-size: 14px;
                  img {
                    margin-right: 5px;
                    object-fit: contain;
                  }
                }
              }
            }
          }
          .acBox:hover {
            .title {
              color: #08a579;
            }
          }
        }
      }
    }
  }
  .tipsTc {
    overflow: hidden;
    /deep/.el-dialog {
      border-radius: 20px;
    }
    /deep/.el-dialog__header {
      padding: 0;
    }
    /deep/.el-dialog__body {
      padding: 0;
    }
    /deep/.el-dialog__headerbtn .el-dialog__close {
      color: #c0c1c5;
    }
    .tcBox {
      overflow: hidden;
      h4 {
        margin: 0 auto;
        margin-top: 40px;
        margin-bottom: 60px;
        text-align: center;
        font-size: 20px;
        color: #333333;
      }
      p {
        text-align: center;
        line-height: 38px;
        font-size: 20px;
        color: #333;
        span {
          font-weight: bold;
        }
      }
      .goBuy {
        margin: 60px auto;
        font-size: 24px;
        width: 400px;
        height: 60px;
        background: #08a579;
        border: 1px solid #dcdfe6;
        border-radius: 6px;
        text-align: center;
        line-height: 60px;
        color: #fff;
        cursor: pointer;
        user-select: none;
      }
      .goBuy:active {
        opacity: 0.8;
      }
    }
  }
}
</style>